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()方法是返回上一個頁面,就相當於按下了手機返回物理鍵一樣的效果   
               <Button
        	title="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發現是跳轉是自己頁面會不跳
		<Button
			title="Go to Details... again"
			onPress={() => this.props.navigation.push('Details', {
		    	itemId: Math.floor(Math.random() * 100),
		})}
		/>
		//這裡我們從Details頁面跳到了Home頁面
                //this.props.navigation.navigate(路由名字),要記得不是類名,別傻逼了
		<Button
			title="Go to Home"
			onPress={() => this.props.navigation.navigate('Home')}
		/>
                //下面的this.props.navigation.goBack()方法是返回上一個頁面,就相當於按下了手機返回物理鍵一樣的效果   
		<Button
			title="Go back"
			onPress={() => this.props.navigation.goBack()}
		/>
                //this.props.navigation.popToTop()是回到棧底頁面的函式,因為我們一開始進來的時候是Home頁面,
                //所以這裡也跳到了Home頁面
		<Button
			title="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,然後也看到了攜帶過來的引數,然後你可以點選下面的幾個按鈕測試下效果.