1? 實現(xiàn)的功能

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

?

?

?

?

2 測試Demo

App.js文件如下,直接拷貝到你的項目,直接運(yùn)行

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就是這里的名字,下面的頁面可以自己通過參數(shù)攜帶過去,然后顯示static navigationOptions = {title : 'HomeScreen',}render() {return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>Home Screen</Text>//this.props.navigation.navigate('Details');就是導(dǎo)航到這個Details頁面去,也就是跳到這個頁面,//DetailsScreen,因為我們下面在createStackNavigator寫了Details頁面路由名字,一般需要攜帶參數(shù),也就是//下面這種寫法this.props.navigation.navigate('Details', {key : value, ...});//這里我們傳遞了2個參數(shù),分別是itemId,otherParam,我們需要到DetailsScreen這個頁面獲取<Button onPress={() => this.props.navigation.navigate('Details', {itemId:100,otherParam:'chenyu',})} title = "go to Details"/>//下面的this.props.navigation.goBack()方法是返回上一個頁面,就相當(dāng)于按下了手機(jī)返回物理鍵一樣的效果 <Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/></View>);} } //DetailsScreen是一個頁面路由 class DetailsScreen extends React.Component {/**static navigationOptions = {title : 'DetailsScreen',}**///這里的title就是通過HomeScreen頁面參數(shù)攜帶過來的,這里的{navigation}和下面的{navigation}的類似static navigationOptions = ({navigation}) => {return {title : navigation.getParam('otherParam', 'no-values'),};};render() {//這里我們先要獲取{navigation}通過this.props;const {navigation} = this.props;//通過navigation.getParam來獲取傳遞過來的參數(shù)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)是把對象轉(zhuǎn)為字符串,所以下面的內(nèi)容會顯示從HomeScreen頁面攜帶過來的參數(shù)<Text>itemId:{JSON.stringify(itemId)}</Text><Text>otherParam:{JSON.stringify(otherParam)}</Text>//這里用到了this.props.navigation.push('Details', {...})來跳到一個新的頁面,新的頁面也就是自己,還攜帶了參數(shù)//因為所有頁面是一個棧,如果這里用this.props.navigation.navigate('Details')會沒有效果,因為//this.props.navigation.navigate發(fā)現(xiàn)是跳轉(zhuǎn)是自己頁面會不跳<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()方法是返回上一個頁面,就相當(dāng)于按下了手機(jī)返回物理鍵一樣的效果 <Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/>//this.props.navigation.popToTop()是回到棧底頁面的函數(shù),因為我們一開始進(jìn)來的時候是Home頁面,//所以這里也跳到了Home頁面<Buttontitle="Go popToTop"onPress={() => this.props.navigation.popToTop()}/></View>);} }//這里我們創(chuàng)建了導(dǎo)航棧 const RootStack = createStackNavigator(//這里是寫路由名字,Home和Details是路由名字,相當(dāng)于對應(yīng)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 運(yùn)行結(jié)果

初始運(yùn)行Home頁面的效果如下

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。