React Navigation 是一個易于擴(kuò)展且易于使用的APP導(dǎo)航解決方案他托。
Github: https://github.com/react-community/react-navigation
Home: https://reactnavigation.org/
之前的幾節(jié)里辨液，我們發(fā)現(xiàn)App的頂欄并沒有看到常見的導(dǎo)航條，一般導(dǎo)航條由三個部分組成比庄，左邊的button icon，中間的文字乏盐，和右邊的button icon佳窑。頂欄左側(cè)的button一般是用作喚出側(cè)邊欄或者返回上一頁。右邊的button通常是功能性按鍵父能。
npm install --save react-navigation
可以看到React Navigation可以兼容安卓和iOS的導(dǎo)航神凑，你無需編寫兩套導(dǎo)航代碼。
react navigation 總共提供了三種 navigation 形式何吝，分別是 Stack Navigator溉委，Tab Navigator 和 Drawer Navigator。
Stack Navigator 就是普通導(dǎo)航岔霸，每次頁面都會疊在原本頁面上方薛躬。
Tab Navigator 就是底部Tab導(dǎo)航，點(diǎn)擊不同tab到不同頁面呆细。
Drawer Navigator 就是側(cè)邊抽屜導(dǎo)航型宝，你可以通過側(cè)滑或點(diǎn)擊button喚出它八匠。
并且三種可以相互組合。
我們更改一下項(xiàng)目的目錄結(jié)構(gòu)趴酣。之前所有的view或者是screen都是放在 views/ 文件夾中的梨树，但是有的是 tab view，有的是普通 view岖寞，有的是 drawer view抡四，所以我們得區(qū)分開來。
tab view 就是在這個 view 中 相應(yīng)的 tab icon 是選中狀態(tài)仗谆，drawer view 也是在這個 view 中相應(yīng)的 drawer icon 是選中狀態(tài)指巡。
修改目錄結(jié)構(gòu)
增加 tabs 目錄，里面放 tab 相關(guān)的 view隶垮，之前的幾個 view 都可以修改為相應(yīng)的 Tab
Tab Navigator
首先介紹Tab Navigator藻雪。Tab Navigator就是最常見的在App下方的導(dǎo)航。之前在004中也已經(jīng)講過采用 react-native-elements 的方法創(chuàng)建 TabView狸吞。但是這種方法只適合非常簡單的應(yīng)用勉耀，如果不同Tab間需要跳轉(zhuǎn)，或者與其他view需要跳轉(zhuǎn)蹋偏，這種方法管理就會比較困難便斥。React Navigation 中引入了非常簡單的 router 機(jī)制，可以通過聲明的方法創(chuàng)建 Tab威始。
官方文檔在此：https://reactnavigation.org/docs/navigators/tab
首先枢纠，導(dǎo)入 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;
下一節(jié)字逗，我們將在 Tab 的基礎(chǔ)上添加 Stack Navigator京郑。
icons 可以參見 https://oblador.github.io/react-native-vector-icons/
