一、纯JS的解决方案:React Navigation

易用、跨平台、良好的状态管理
教程:

https://www.jianshu.com/p/2f575cc35780
https://www.jianshu.com/p/b877115fff1b

概况,React Navigation分为三个部分:

StackNavigator:类似顶部导航条,用来跳转页面和传递参数;
TabNavigator:类似底部标签,用来区分模块;
DrawerNavigator:抽屉,类似从APP侧滑出一个页面

1、注意事项:

iOS和Android平台的tabs默认行为不一致,表现在iOS正常,安卓的tab在顶部且处于可滑动状态,一统江山方法如下:

const Navigation = TabNavigator(
   {
       tab1: { screen: screen1 },
       tab2: { screen: screen2 },
   },
   // customize app tab bars
   {
       tabBarPosition: 'bottom',
       tabBarComponent: TabBarBottom, // 安卓默认是顶部,不设置该项可能导致tabIcon位置错误
       swipeEnabled: false, // 安卓默认可滑动
       lazy: true,
       initialRouteName: 'Offline',
       tabBarOptions: {
           indicatorStyle: {
               height: 0, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
           },
           style: {
               height: 49,
               backgroundColor: 'white'
         },
           labelStyle: {
               marginBottom: 3
           },
           iconStyle: {
               height: 24,
               width: 24,
               margin: 0
           },
           showIcon: true, // 是否显示图标,安卓默认关闭
           // label和icon的前景色 活跃状态下(选中)
           activeTintColor: '#4ECBFC',
           // label和icon的前景色 不活跃状态下(未选中)
           inactiveTintColor: '#aaa',
           // label和icon的背景色 活跃状态下
           activeBackgroundColor: 'white',
           // label和icon的背景色 不活跃状态下
           inactiveBackgroundColor: 'white',
           // 不透明度为按选项卡(iOS和Android < 5.0)
           pressOpacity: 0.3,
           scrollEnabled: false// 是否启用可滚动的选项卡,安卓特有
       }
   }
);

安卓tabbar文字会下移,因为安卓比iOS多一个属性,就是iconStyle,通过设置labelStyle和iconStyle两个样式,可以调整整理合理性。

2、安卓导航栏文字默认居左调整

自定义导航样式,重写:

headerTitleStyle

3、让安卓实现push动画

// 先引入这个方法
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';

// 在StackNavigator配置headerMode的地方,使用transitionConfig添加
{
   headerMode: 'screen',
   transitionConfig:()=>({
       screenInterpolator:CardStackStyleInterpolator.forHorizontal,
   })
}

二、iOS平台专用的:NavigatorIOS

提供UINavigationViewController类的方法。其中Navigator已经被正式废弃!(于RN44被抛弃)

替代方案:react-native-deprecated-custom-components

三、Native外观和体验的跨端方案:native-navigation, react-native-navigation.

其中前者有AirBnb团队开发,1.x前处于不稳定版本。不建议投入正式用途。
后者由WiX团队提供。目前功能已经相对完整,功能完全。必须在RN 0.43以后才可以用。
如果是混合开发,比如RN模块只作为一个TAB嵌入,那么可以考虑这种方案。

具体资料如下:https://wix.github.io/react-native-navigation/#/