React Navigation 是一个易于扩展且易于使用的APP导航解决方案。
Github: https://github.com/react-community/react-navigation
Home: https://reactnavigation.org/
之前的几节里，我们发现App的顶栏并没有看到常见的导航条，一般导航条由三个部分组成，左边的button icon，中间的文字，和右边的button icon。顶栏左侧的button一般是用作唤出侧边栏或者返回上一页。右边的button通常是功能性按键。
npm install --save react-navigation
可以看到React Navigation可以兼容安卓和iOS的导航，你无需编写两套导航代码。
react navigation 总共提供了三种 navigation 形式，分别是 Stack Navigator，Tab Navigator 和 Drawer Navigator。
Stack Navigator 就是普通导航，每次页面都会叠在原本页面上方。
Tab Navigator 就是底部Tab导航，点击不同tab到不同页面。
Drawer Navigator 就是侧边抽屉导航，你可以通过侧滑或点击button唤出它。
并且三种可以相互组合。
我们更改一下项目的目录结构。之前所有的view或者是screen都是放在 views/ 文件夹中的，但是有的是 tab view，有的是普通 view，有的是 drawer view，所以我们得区分开来。
tab view 就是在这个 view 中 相应的 tab icon 是选中状态，drawer view 也是在这个 view 中相应的 drawer icon 是选中状态。
修改目录结构
增加 tabs 目录，里面放 tab 相关的 view，之前的几个 view 都可以修改为相应的 Tab
Tab Navigator
首先介绍Tab Navigator。Tab Navigator就是最常见的在App下方的导航。之前在004中也已经讲过采用 react-native-elements 的方法创建 TabView。但是这种方法只适合非常简单的应用，如果不同Tab间需要跳转，或者与其他view需要跳转，这种方法管理就会比较困难。React Navigation 中引入了非常简单的 router 机制，可以通过声明的方法创建 Tab。
官方文档在此：https://reactnavigation.org/docs/navigators/tab
首先，导入 react-navigation 中的 TabNavigator
import { TabNavigator } from 'react-navigation';
然后，重新写我们的 Tab
import React from 'react';
import { Icon, View } from 'react-native-elements';
import { TabNavigator } from 'react-navigation';
import { HomeTab } from './tabs/HomeTab'
import { UserTab } from './tabs/UserTab'
import { ShopTab } from './tabs/ShopTab'
const App = TabNavigator(
{
HomeTab: {
screen: HomeTab,
path: '/home',
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name='whatshot'
size={30}
type="MaterialIcons"
color={tintColor}
/>
),
}
},
ShopTab: {
screen: ShopTab,
path: '/shop',
navigationOptions: {
tabBarLabel: '面膜',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name='face'
size={30}
type="MaterialIcons"
color={tintColor}
/>
),
}
},
UserTab: {
screen: UserTab,
path: '/user',
navigationOptions: {
tabBarLabel: '用户',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name='account-circle'
size={30}
type="material-community"
color={tintColor}
/>
),
}
}
},{
initialRouteName: 'HomeTab',
animationEnabled: false,
swipeEnabled: false,
tabBarOptions: {
activeTintColor: '#e91e63',
},
}
)
export default App;
下一节，我们将在 Tab 的基础上添加 Stack Navigator。
icons 可以参见 https://oblador.github.io/react-native-vector-icons/
