一、纯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嵌入,那么可以考虑这种方案。