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

...