navigation是官方推荐的一种用于界面跳转实现方式，
准备工作：添加Navigation库到项目里面
打开项目的工作空间，shifr+鼠标右键，在此处打开命令行，执行如下语句，安装navigation库
yarn add react-navigation
1、用navigation实现一个简单内容展示
import React from 'react';
import {
Text,
View,
Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'DemoApp',
};
render() {
return (<Text>这是内容部分</Text>) ;
}
}
const DemoApp = StackNavigator({
Home: {screen: HomeScreen},
});
export default DemoApp
2、实现页面跳转
需要在DemoApp变量中，使用Chat,新申明一个可跳转页面,值得注意的是，在执行跳转事件的类中，必须申明一个this.props.navigation变量，否则会报错
....省略其他代码...
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'DemoApp',
};
render() {
//这行代码一定要写，否者会报错
const { navigate } = this.props.navigation;
return (
<View >
<Text style={{height:100}}>这是内容部分</Text>
<Button title="打开登陆界面" onPress={()=>navigate('Chat')}/>
</View>
);
}
}
const DemoApp = StackNavigator({
Home: {screen: HomeScreen},
Chat: { screen: LoginActivity },
});
....省略其他代码...
3、打开一个新界面并且传值过去
原页面代码部分
...
//触发打开新界面的button，通过{key:'value'}，name是由我们自己定义的key
<Button title="打开登陆界面" onPress={()=>navigate('Chat',{name:'登陆界面'})}/>
...
待打开的界面代码部分，也可以在控件中使用上一个页面传过来的值，比如Text、Button控件
如果上一个界面传过来的值为空并不会出现异常，而是会显示undefined
...
//被打开的新界面
static navigationOptions = ({navigation})=>({
//通过key取值
title: `${navigation.state.params.name}`,
});
...
