1? 實現的功能

在網上看React Native文檔,我特碼就想實現一個頁面到另外一個頁面的跳轉,然后另外一個頁面怎么獲取參數,特么沒找到一個說清楚的,要么太復雜,要么說了不理解,下面是我自己寫的一個App.js文件,實現一個Home頁面跳到另外Details頁面,并且攜帶了參數怎么在Details頁面獲取,就是這么簡單粗暴.

?

?

?

?

2 測試Demo

App.js文件如下,直接拷貝到你的項目,直接運行

import React from 'react'; import { View, Text, Button} from 'react-native'; import { createStackNavigator } from 'react-navigation';//HomeScreen是一個頁面路由 class HomeScreen extends React.Component {//navigationOptions 這是就像Android toolbar中間的文字,title就是這里的名字,下面的頁面可以自己通過參數攜帶過去,然后顯示static navigationOptions = {title : 'HomeScreen',}render() {return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>Home Screen</Text>//this.props.navigation.navigate('Details');就是導航到這個Details頁面去,也就是跳到這個頁面,//DetailsScreen,因為我們下面在createStackNavigator寫了Details頁面路由名字,一般需要攜帶參數,也就是//下面這種寫法this.props.navigation.navigate('Details', {key : value, ...});//這里我們傳遞了2個參數,分別是itemId,otherParam,我們需要到DetailsScreen這個頁面獲取<Button onPress={() => this.props.navigation.navigate('Details', {itemId:100,otherParam:'chenyu',})} title = "go to Details"/>//下面的this.props.navigation.goBack()方法是返回上一個頁面,就相當于按下了手機返回物理鍵一樣的效果 <Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/></View>);} } //DetailsScreen是一個頁面路由 class DetailsScreen extends React.Component {/**static navigationOptions = {title : 'DetailsScreen',}**///這里的title就是通過HomeScreen頁面參數攜帶過來的,這里的{navigation}和下面的{navigation}的類似static navigationOptions = ({navigation}) => {return {title : navigation.getParam('otherParam', 'no-values'),};};render() {//這里我們先要獲取{navigation}通過this.props;const {navigation} = this.props;//通過navigation.getParam來獲取傳遞過來的參數const itemId = navigation.getParam('itemId', 'no-values');const otherParam = navigation.getParam('otherParam', 'no-values');return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text>//JSON.stringify(object)是把對象轉為字符串,所以下面的內容會顯示從HomeScreen頁面攜帶過來的參數<Text>itemId:{JSON.stringify(itemId)}</Text><Text>otherParam:{JSON.stringify(otherParam)}</Text>//這里用到了this.props.navigation.push('Details', {...})來跳到一個新的頁面,新的頁面也就是自己,還攜帶了參數//因為所有頁面是一個棧,如果這里用this.props.navigation.navigate('Details')會沒有效果,因為//this.props.navigation.navigate發現是跳轉是自己頁面會不跳<Buttontitle="Go to Details... again"onPress={() => this.props.navigation.push('Details', {itemId: Math.floor(Math.random() * 100),})}/>//這里我們從Details頁面跳到了Home頁面//this.props.navigation.navigate(路由名字),要記得不是類名,別傻逼了<Buttontitle="Go to Home"onPress={() => this.props.navigation.navigate('Home')}/>//下面的this.props.navigation.goBack()方法是返回上一個頁面,就相當于按下了手機返回物理鍵一樣的效果 <Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/>//this.props.navigation.popToTop()是回到棧底頁面的函數,因為我們一開始進來的時候是Home頁面,//所以這里也跳到了Home頁面<Buttontitle="Go popToTop"onPress={() => this.props.navigation.popToTop()}/></View>);} }//這里我們創建了導航棧 const RootStack = createStackNavigator(//這里是寫路由名字,Home和Details是路由名字,相當于對應2個頁面//這里的HomeScreen和DetailsScreen必須是screen熟悉{Home: HomeScreen,Details: DetailsScreen,},//下面就是一些初始化的配置,初始加載Home這個頁面{initialRouteName: 'Home',} );export default class App extends React.Component {render() {return <RootStack/>;} }/**export default createStackNavigator({Home: {screen: HomeScreen}, });**/

?

?

?

?

?

3 運行結果

初始運行Home頁面的效果如下

然后我點擊了GO TO DETAILS這個按鈕,然后就攜到了另外一個頁面

我們這里獲取到了導航欄的title,然后也看到了攜帶過來的參數,然后你可以點擊下面的幾個按鈕測試下效果.

總結

以上是生活随笔為你收集整理的React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。