RN navigation （一）

1.react-native init ReactNavigation 

2.yarn add react-navigation

3.react-native run-android 

这样如下图就说明运行成功了，当然这里你如果有使用模拟器或者真机并开启调试模式，则会自动安装并运行App

1-1

4.新建App.js文件，并在index.android.js中引入

2-1

5.App.js中引入navigation ，并使用

import {

StackNavigator,

} from 'react-navigation';

const App = StackNavigator({

    ReactNavigation:{screen:ReactNavigation},

    Main: {screen: MainScreen},

    Profile: {screen: ProfileScreen},

});

6.我们新建两个界面，分别是MainScreen和ProfileScreen

如何实现跳转？

非常简单

const { navigate } = this.props.navigation;

navigate('Main');

如何传参？

const { navigate } = this.props.navigation;

navigate('Main',{userName:'linjian',age:28});

如何接受参数？

const { params } = this.props.navigation.state;

let userName = params.userName;

let age  = params.age;

跳到MainScreen如何回传参数到ReactNavigation?

setUserName(userName){

      this.setState({userName:userName})

}

goToNext(){

      const { navigate } = this.props.navigation;

      navigate('Main',{userName:this.state.userName,age:28,setUserName:this.setUserName.bind(this)});

}

MainScreen 里面

static navigationOptions = ({ navigation }) => ({    title:{`Chat with ${navigation.state.params.userName}`},    headerRight:{navigation.state.params.setUserName('huanglimei')}} />,

});

英文文档：请点击这里