navigation的几个难点和问题：
1.底部tab是否可以加上中间的大按钮？ 如果加上，如何触发事件？ js文件放哪？
2.navigation的登录注册页面。成功后应该不能返回刚刚的登录页面？清空页面栈？
3.登录成功跳转到大厅？意图页面？还是当前所在页？弹出model是不是可以解决所有问题？登录成功如何重刷当前页？
一、前言
在 React Native 中，官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。 react-navigation 主要包括三个组件：
TabNavigator切换组件 ，用来实现同一个页面上不同界面的切换，即tab选项卡StackNavigator导航组件，用于实现各个页面之间的跳转，即页面跳转（通过stack栈记录）DrawerNavigator抽屉组件，可以实现侧滑的抽屉效果
本次我们主要说说前两个，DrawerNavigator 笔者不曾使用
（一）、怎么使用navigation（入口和概览）
export default class Navigator extends Component { render() { return( <Navigator /> ) } } const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs)
上面的StackNavigator就是react-navigation 的导航组件：
StackNavigator导航组件，用于实现各个页面之间的跳转，即页面跳转（通过stack栈记录）
那么它的两个参数 StackNavigator(StackRouteConfigs, StackNavigatorConfigs) 又是干啥的呢？
（二）、怎么使用StackNavigator
const StackRouteConfigs = { MainTab: { screen: MainTab, navigationOptions: ({navigation}) => ({ //主页大厅的tab及其相关页面 }), }, Datail: { screen: DatailPage, navigationOptions: ({navigation}) => ({
}), }, }; const StackNavigatorConfig = { initialRouteName: 'MainTab', //默认先加载的页面 navigationOptions: { //路由页面的配置选项，可定义头部内容、样式 }, mode: 'card', //页面跳转方式，card 表示原生系统默认的方式和 modal只针对iOS平台，模态跳转 headerMode: 'screen',页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种 };
StackRouteConfigs参数表示各个页面路由配置，类似于android原生开发中的 AndroidManifest.xml ，它是让导航器知道需要导航的路由对应的页面。
StackNavigatorConfigs参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等：
initialRouteName - 导航器组件中初始显示页面的路由名称，如果不设置，则默认第一个路由页面为初始显示页面 initialRouteParams - 给初始路由的参数，在初始显示的页面中可以通过 this.props.navigation.state.params 来获取 navigationOptions - 路由页面的配置选项，它会被 RouteConfigs 参数中的 navigationOptions 的对应属性覆盖。 paths - 路由中设置的路径的覆盖映射配置 mode - 页面跳转方式，有 card 和 modal 两种，默认为 card ： card - 原生系统默认的的跳转 modal - 只针对iOS平台，模态跳转 headerMode - 页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种： float - 渐变，类似iOS的原生效果 screen - 标题与屏幕一起淡入淡出 none - 没有动画 cardStyle - 为各个页面设置统一的样式，比如背景色，字体大小等 transitionConfig - 配置页面跳转的动画，覆盖默认的动画效果 onTransitionStart - 页面跳转动画即将开始时调用 onTransitionEnd - 页面跳转动画一旦完成会马上调用
上面的MainTab表示大厅内的Tab内容
也就是：
TabNavigator切换组件 ，用来实现同一个页面上不同界面的切换，即tab选项卡
它怎么使用呢？？？
（三）、怎么使用TabNavigator
const MainTab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const TabNavigatorConfigs = { initialRouteName: 'Recommend', tabBarComponent: TabBarBottom, tabBarPosition: 'bottom', lazy: true, tabBarOptions: { activeTintColor: 'red', inactiveTintColor: '#999', showIcon: true, indicatorStyle: {height: 0}, style: { backgroundColor: '#fff', height: (height*0.08 < 65) ? 65 : height*0.08, paddingVertical: (height*0.08 < 65) ? 5 : height*0.08/13, }, labelStyle: {fontSize: 11}, } };
const TabRouteConfigs = { Attention: { screen: AttentionScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '关注', tabBarIcon: ({focused, tintColor}) => ( <Image source={focused ? LocalImage.AttentionSelectedImage : LocalImage.AttentionImage} style={{ '33%'}} resizeMode='contain'> </Image> ), }), }, Recommend: { screen: RecommendScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '推荐', tabBarIcon: ({focused, tintColor}) => ( <Image source={focused ? LocalImage.RecommendSelectedImage : LocalImage.RecommendImage} style={{ '33%'}} resizeMode='contain'> </Image> ), }), }, Library: { screen: LibraryScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '仓库', tabBarIcon: ({focused, tintColor}) => ( <Image source={focused ? LocalImage.LibrarySelectedImage : LocalImage.LibraryImage} style={{ '33%'}} resizeMode='contain'> </Image> ), }), }, Profile: { screen: ProfileScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '我的', tabBarIcon: ({focused, tintColor}) => ( <Image source={focused ? LocalImage.ProfileSelectedImage : LocalImage.ProfileImage} style={{ '33%'}} resizeMode='contain'> </Image> ), }), }, };
TabNavigator 切换组件 TabNavigatorConfigs 的配置tabBarComponent - Tab选项卡组件，有 TabBarBottom 和 TabBarTop 两个值，在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop 。 TabBarTop - 在页面的顶部 TabBarBottom - 在页面的底部 tabBarPosition - Tab选项卡的位置，有 top 或 bottom 两个值 swipeEnabled - 是否可以滑动切换Tab选项卡 animationEnabled - 点击Tab选项卡切换界面是否需要动画 lazy - 是否懒加载页面 initialRouteName - 初始显示的Tab对应的页面路由名称 order - 用路由名称数组来表示Tab选项卡的顺序，默认为路由配置顺序 paths - 路径配置 backBehavior - androd点击返回键时的处理，有 initialRoute 和 none 两个值 initailRoute - 返回初始界面 none - 退出 tabBarOptions - Tab配置属性，用在 TabBarTop 和 TabBarBottom 时有些属性不一致： 用于 TabBarTop 时： activeTintColor - 选中的文字颜色 inactiveTintColor - 未选中的文字颜色 showIcon - 是否显示图标，默认显示 showLabel - 是否显示标签，默认显示 upperCaseLabel - 是否使用大写字母，默认使用 pressColor - android 5.0以上的MD风格波纹颜色 pressOpacity - android 5.0以下或者iOS按下的透明度 scrollEnabled - 是否可以滚动 tabStyle - 单个Tab的样式 indicatorStyle - 指示器的样式 labelStyle - 标签的样式 iconStyle - icon的样式 style - 整个TabBar的样式 用于 TabBarBottom 时： activeTintColor - 选中Tab的文字颜色 activeBackgroundColor - 选中Tab的背景颜色 inactiveTintColor - 未选中Tab的的文字颜色 inactiveBackgroundColor - 未选中Tab的背景颜色 showLabel - 是否显示标题，默认显示 style - 整个TabBar的样式 labelStyle - 标签的样式 tabStyle - 单个Tab的样式
三、结语
暂时就这样