Navigators允許你定義你應(yīng)用的導(dǎo)航框架尉共，Navigators也會渲染通常的控件挎挖，包括headers、tab bars弃衍，而且可配置。實(shí)際上，navigators是React樸素(plain)的控件证鸥。
內(nèi)置Navigators
react-navigation 包含以下方法來幫你創(chuàng)建navigators:
- StackNavigator - 每次渲染一屏，提供過場動畫。當(dāng)打開新頁面時枉层，將其加入棧頂泉褐。
- TabNavigator - 渲染一個標(biāo)簽欄來讓用戶在幾個屏幕間切換。
- DrawerNavigator - 提供一個從屏幕左邊劃入的抽屜欄
使用Navigators來渲染屏幕
navigators渲染的只是React的組件鸟蜡，閱讀以下內(nèi)容學(xué)習(xí)如何創(chuàng)建屏幕(screen)：
-
Screen
navigationprop 允許屏幕分發(fā)導(dǎo)航action膜赃，例如打開另一屏 -
Screen
navigationOptions定制屏幕如何展現(xiàn)，如頂部標(biāo)題揉忘、tab標(biāo)簽等
在頂級控件調(diào)用Navigate
如果你想在定義navigator的同級控件中使用它跳座，可以用ref選項
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
someEvent() {
// call navigate for AppNavigator here:
this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
}
render() {
return (
<AppNavigator ref={nav => { this.navigator = nav; }} />
);
}
}
注意：此解決方案只能用在navigator的頂級中。
導(dǎo)航容器
當(dāng)navigation prop缺失時泣矛，內(nèi)置的navigators可以自動成為頂級的navigators疲眷。這個功能提供了一個透明的navigation容器，作為頂級navigation prop的來源您朽。
當(dāng)渲染其中一個navigator時狂丝，navigation prop是可選的。當(dāng)缺失時哗总，容器介入并管理它自己的導(dǎo)航狀態(tài)几颜。他也集成了處理URLs，外聯(lián)以及安卓的back鍵的功能讯屈。
為了方便的目的蛋哭，內(nèi)置的navigators有這樣的能力，因為在底層耻煤，他們使用createNavigationContainer具壮。通常，navigators為了運(yùn)行需要一個navigation prop哈蝇。
頂級的navigators接受如下屬性：
onNavigationStateChange(prevState, newState, action)
這個方法在每次導(dǎo)航狀態(tài)變化時都會調(diào)用棺妓。它接受到的參數(shù)是上一個狀態(tài)、新狀態(tài)以及使?fàn)顟B(tài)發(fā)生變化的action炮赦。默認(rèn)會在控制臺打印狀態(tài)變化的log怜跑。
uriPrefix
URIs的前綴app可能會處理。當(dāng)處理 deep link 時會用來提取路由用到的路徑
