React Native之通過createStackNavigator實作攜帶參數的頁面與頁面之間的跳轉

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,然後也看到了攜帶過來的參數,然後你可以點選下面的幾個按鈕測試下效果.