下面主要介绍使用TabNavigator+StackNavigator实现界面间跳转，Tab切换。
TabNavigator：渲染出一个tab bar让用户可以在多个screen之间切换（类似底部导航栏，用来在同一屏幕下切换不同界面）
StackNavigator：一次渲染一个screen,在screen之间切换.当一个新的screen被打开的时候,他被放在栈顶（用来跳转页面和传递参数）
1）首先在你的应用中安装此库：
npm install --save react-navigation2）创建一个.js文件（这里文件命名为MainPage），用于定义TabNavigator：
import React from 'react';
import {
StyleSheet,
Image,
Platform
} from 'react-native';
import {TabNavigator} from "react-navigation";
import Tab1Page from './Tab1Page';
import Tab2Page from './Tab2Page';
import Tab3Page from './Tab3Page';
import Tab4Page from './Tab4Page';
export const MainNavigator = TabNavigator({
Tab1: {
screen: Tab1Page,
navigationOptions: {//配置TabNavigator的一些属性
title: 'Tab1',//标题，会同时设置导航条和标签栏的title
tabBarLabel: 'Tab1',//标签栏的title，这里设置的与标题一样，如不一样时可进行设置
//设置标签栏的图标
tabBarIcon: ({tintColor}) => (
TabNavigatorConfig
screen：对应界面名称，需要填入import之后的页面
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'
swipeEnabled： 是否允许在标签之间进行滑动
animationEnabled： 是否在更改标签时显示动画
lazy-是否根据需要懒惰呈现标签，而不是提前，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐为true
tabBarOptions：配置标签栏的一些属性
tabBarOptions 配置标签栏的一些属性
activeTintColor：设置文字和图片选中颜色（前景色）
activeBackgroundColor：设置文字和图片选中的背景色
inactiveTintColor：设置文字和图片默认颜色 （前景色）
inactiveBackgroundColor：设置文字和图片默认的背景色
showLabel：是否显示label，默认开启
style：tabbar的样式
labelStyle：label的样式
tabStyle：tab的样式
showIcon- android 默认不显示 icon, 需要设置为 true 才会显示
upperCaseLabel：是否使标签大写，默认为true
pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）
pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）
scrollEnabled：是否启用可滚动选项卡
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
iconStyle：图标样式
navigationOptions配置TabNavigator的一些属性
title：标题，会同时设置导航条和标签栏的title
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)
tabBarIcon：设置标签栏的图标。需要给每个都设置
tabBarLabel：设置标签栏的title
3)创建一个.js文件（这里的文件命名为AppIndexPage），用于定义StackNavigator：
import React from 'react';
import {StackNavigator} from "react-navigation";
import {MainNavigator} from './MainPage';
import TestPage from './TestPage';
export const AppIndex = StackNavigator({
Home: {
screen: MainNavigator,
navigationOptions: {
headerStyle: {
backgroundColor: '#e91e63',
},
headerTitleStyle: {
color: 'white',
alignSelf: 'center',
},
}
},
Test: {
screen: TestPage,
navigationOptions: {
title: 'TestPage',
// headerTintColor: 'white',//导航栏颜色
headerStyle: {//导航条的样式。背景色，宽高等
backgroundColor: '#e91e63',//背景色
},
headerTitleStyle: {//导航栏文字样式
color: 'white',
alignSelf: 'center',
},
},
},
}, {
headerMode: 'screen'//headerMode返回上级页面时动画效果
// float：iOS默认的效果
// screen：滑动过程中，整个页面都会返回
// none：无动画
});
StackNavigatorConfig
screen：对应界面名称，需要填入import之后的页面
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件
initialRouteParams：初始路由参数
navigationOptions：配置StackNavigator的一些属性。
path：路由中设置的路径的覆盖映射配置 （path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径，例如：【/pages/Home】。此时我们可以在手机浏览器中输入：app名称://pages/Home来启动该App，并进入Home界面。）
mode：定义跳转风格
card：使用iOS和安卓默认的风格
modal：iOS独有的使屏幕从底部画出。类似iOS的present效果
headerMode：返回上级页面时动画效果
float：iOS默认的效果
screen：滑动过程中，整个页面都会返回
none：无动画
cardStyle：自定义设置跳转效果
transitionConfig： 自定义设置滑动返回的配置
onTransitionStart：当转换动画即将开始时被调用的功能
onTransitionEnd：当转换动画完成，将被调用的功能
navigationOptions配置StackNavigator的一些属性
title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用
header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
headerTitle：设置导航栏标题
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可 以设置为null
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
headerRight：设置导航条右侧。可以是按钮或者其他视图控件
headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
headerStyle：设置导航条的样式。背景色，宽高等
headerTitleStyle：设置导航栏文字样式
headerBackTitleStyle：设置导航栏‘返回’文字样式
headerTintColor：设置导航栏颜色
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭
4）界面跳转（传值与取值）
在界面组件注入到StackNavigator中时，界面组件就被赋予了navigation属性，即在界面组件中可以通过【this.props.navigation】获取并进行一些操作
1）通过navigate实现页面跳转：
this.props.navigation.navigate('Test')
（其中'Test'为我们在StackNavigator注册界面组件时的名称）
返回上一页：
this.props.navigation.goBack();
2）传值
this.props.navigation.navigate('Test',{ user: 'Lucy' })3）取值
this.props.navigation.state.params.user5）最后在index.android.js和index.ios.js文件下进行使用，两个文件代码一样，如下：
import React from 'react';
import {
AppRegistry
} from 'react-native';
import {AppIndex} from './js/pages/AppIndexPage';
AppRegistry.registerComponent('NativeApp', () => AppIndex);
最后，关于react-navigation的具体介绍，可查看官网