React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转

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
  },
});
 **/