路由管理需求
从第一次接触react-native，我就在思考，和其他任何 UI 框架一样，app 都需要路由管理，页面切换，导航组件等等。在移动端，优雅的页面切换尤其需要手势和动画的加持，那如何实现react-native app 的页面跳转等功能呢？
react-navigation 这个库是官方推荐的路由管理库，从前端同学的角度来说，类似于 vue-router 这类库。但移动端的特点是，navigation 库既包含了路由管理，也包含了用于导航的UI 组件。
路由管理
路由管理的功能主要指的，页面跳转，goBack，带参数跳转等功能。凡是通过createStackNavigator({ home: HomeScreen, profile: ProfileScreen }）等 create*Navigator构造函数 构建的navigator 实例，HomeScreen 等组件就自动注入了props.navigation 属性，可用于各种路由操作
例如以下代码：
class HomeScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>This is the home screen of the app</Text>
<Button
onPress={() => navigate('Profile', { name: 'Brent' })}
title="Go to Brent's profile"
/>
</View>
);
}
}
this.props.navigation对象 有许多实用函数，跳转，goBack，reset所有路由，打开左侧drawer导航栏等等。具体可以参考https://reactnavigation.org/docs/en/navigation-prop.html
导航UI 组件
实际上最直观的还是用户导航的UI组件，也是我比较关心的部分，想要实现顺滑的页面切换效果和各种手势支持，例如微信的左右滑动切换导航等，可以借助内置的导航组件。
基本的导航方式有 stack，tab，drawer这几类。例如上文提到的：
createStackNavigator({ home: HomeScreen, profile: ProfileScreen }）
就会创建一个堆栈navigator，默认是home，当导航到profile 页面的时候，UI上的表现是在home上层叠加 ProfileScreen，比较适用 master-slave 关系，也就是列表页面和详情页面的导航。除了stackNavigator，还可以创建左侧抽屉导航，非常节省屏幕空间，而且手势体验良好。
再简单介绍我这边用到的底部导航组件，应该是最常用的导航方式了。最简单的，可用 bottom-tab-navigator 如下图所示：
createBottomTabNavigator({
home: HomeScreen, // 在HomeScreen 中可以配置tabBarIcon ，tabBarLabel 等信息
profile: ProfileScreen
}, BottomTabNavigatorConfig);
// 第二个参数，则是关于整体tabNavigator 的配置，
// 例如默认激活哪个tab：initialRouteName，active的Tab label是什么颜色：activeTintColor.
react-navigation bottomTab and stackNavigator
关于手势和 lazy 初始化
需要提到的是，关于导航组件配置的细节，一般来说tabNavigator 默认所有路由页面都是懒加载的，也就是切换到页面后再初始化。除了 material-top-tab-navigator，因为MaterialTopTabNavigator 是默认支持手势滑动切换的，所以默认都是启动app时就全部导航页面初始化，达到最顺滑的切换体验。如果感觉同时初始化所有页面影响了app 启动速度，可以考虑把 lazy 设置为 true。
另外谈到手势支持，这得益于react-native-gesture-handler，这个基本的native 手势支持库，已经有超过5万个项目在使用该lib。这个类库感兴趣的同学可以研究下，包括 tab-view，bottom-sheet 等类型的组件都需要用到手势支持。
最终，我把 TabNavigator 和StackNavigator 组合使用，实现基本的app 底部导航加 list-detail 的组合。效果如下，native 的体验还是不错的。该github项目代码目前还处于建设中，暂时没有开放。后面将尝试引入bottom-sheet 和 map的组件，做一些地图marker交互联动的测试。另外，还有更重要的是app 用户状态的本地存储以及 network 请求的使用。
页面切换效果，tab和stack组合使用
网友评论