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

1  實(shí)現(xiàn)的功能

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

2 測(cè)試Demo

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

    import React from 'react';
    import { View, Text, Button} from 'react-native';
    import { createStackNavigator } from 'react-navigation';
     
    //HomeScreen是一個(gè)頁面路由
    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)航到這個(gè)Details頁面去,也就是跳到這個(gè)頁面,
                    //DetailsScreen,因?yàn)槲覀兿旅嬖赾reateStackNavigator寫了Details頁面路由名字,一般需要攜帶參數(shù),也就是
                    //下面這種寫法this.props.navigation.navigate('Details', {key : value, ...});
            //這里我們傳遞了2個(gè)參數(shù),分別是itemId,otherParam,我們需要到DetailsScreen這個(gè)頁面獲取
                   <Button onPress={() => this.props.navigation.navigate('Details', {
                       itemId:100,
                       otherParam:'chenyu',
                   })} title = "go to Details"/>
                   //下面的this.props.navigation.goBack()方法是返回上一個(gè)頁面,就相當(dāng)于按下了手機(jī)返回物理鍵一樣的效果   
                   <Button
                title="Go back"
                   onPress={() => this.props.navigation.goBack()}
                  />
            </View>
        );
        }
    }
    //DetailsScreen是一個(gè)頁面路由
    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)是把對(duì)象轉(zhuǎn)為字符串,所以下面的內(nèi)容會(huì)顯示從HomeScreen頁面攜帶過來的參數(shù)
            <Text>itemId:{JSON.stringify(itemId)}</Text>
            <Text>otherParam:{JSON.stringify(otherParam)}</Text>
            //這里用到了this.props.navigation.push('Details', {...})來跳到一個(gè)新的頁面,新的頁面也就是自己,還攜帶了參數(shù)
            //因?yàn)樗许撁媸且粋€(gè)棧,如果這里用this.props.navigation.navigate('Details')會(huì)沒有效果,因?yàn)?br>             //this.props.navigation.navigate發(fā)現(xiàn)是跳轉(zhuǎn)是自己頁面會(huì)不跳
            <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()方法是返回上一個(gè)頁面,就相當(dāng)于按下了手機(jī)返回物理鍵一樣的效果   
            <Button
                title="Go back"
                onPress={() => this.props.navigation.goBack()}
            />
                    //this.props.navigation.popToTop()是回到棧底頁面的函數(shù),因?yàn)槲覀円婚_始進(jìn)來的時(shí)候是Home頁面,
                    //所以這里也跳到了Home頁面
            <Button
                title="Go popToTop"
                onPress={() => this.props.navigation.popToTop()}
            />
               </View>
           );
        }
    }
     
    //這里我們創(chuàng)建了導(dǎo)航棧
    const RootStack = createStackNavigator(
        //這里是寫路由名字,Home和Details是路由名字,相當(dāng)于對(duì)應(yīng)2個(gè)頁面
        //這里的HomeScreen和DetailsScreen必須是screen熟悉
        {
            Home: HomeScreen,
            Details: DetailsScreen,
        },
        //下面就是一些初始化的配置,初始加載Home這個(gè)頁面
        {
            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頁面的效果如下

然后我點(diǎn)擊了GO TO DETAILS這個(gè)按鈕,然后就攜到了另外一個(gè)頁面

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