在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

1  實現(xiàn)的功能

在網(wǎng)上看React Native文檔,我特碼就想實現(xiàn)一個頁面到另外一個頁面的跳轉,然后另外一個頁面怎么獲取參數(shù),特么沒找到一個說清楚的,要么太復雜,要么說了不理解,下面是我自己寫的一個App.js文件,實現(xiàn)一個Home頁面跳到另外Details頁面,并且攜帶了參數(shù)怎么在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就是這里的名字,下面的頁面可以自己通過參數(shù)攜帶過去,然后顯示
        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頁面路由名字,一般需要攜帶參數(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()方法是返回上一個頁面,就相當于按下了手機返回物理鍵一樣的效果   
                   <Button
                title="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)是把對象轉為字符串,所以下面的內容會顯示從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)是跳轉是自己頁面會不跳
            <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()是回到棧底頁面的函數(shù),因為我們一開始進來的時候是Home頁面,
                    //所以這里也跳到了Home頁面
            <Button
                title="Go popToTop"
                onPress={() => this.props.navigation.popToTop()}
            />
               </View>
           );
        }
    }
     
    //這里我們創(chuàng)建了導航棧
    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,然后也看到了攜帶過來的參數(shù),然后你可以點擊下面的幾個按鈕測試下效果.