在你的應(yīng)用程序中使用 Navigator 來在不同場景之間過渡。為了實現(xiàn)這一功能,為導(dǎo)航器提供了路由對象來識別每一個場景,還提供了一個 renderScene 函數(shù),導(dǎo)航器可以用它來為給定的路線渲染場景。
為了改變場景的動畫或動作屬性,提供了一個 configureScene 道具來為給定的路由配置對象??吹綄?dǎo)航器。默認(rèn)動畫及更多的關(guān)于場景配置選項的信息,請看 Navigator.SceneConfigs。
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
<MySceneComponent
name={route.name}
onForward={() => {
var nextIndex = route.index + 1;
navigator.push({
name: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
Navigator 有兩種方式進行導(dǎo)航。如果你有一個參考元素,你可以調(diào)用一些方法來觸發(fā)導(dǎo)航:
jumpBack()——在不需要卸載當(dāng)前場景的情況下向后跳jumpForward()——向前跳轉(zhuǎn)到路線堆棧中的下一個場景
-jumpTo(route)——過渡到一個現(xiàn)有的沒有被卸載的場景push(route)——導(dǎo)航到一個新的場景,擠壓任何你能夠 jumpForward 的場景
-pop()——回歸并卸載當(dāng)前場景
-replace(route)——用一個新路線替換當(dāng)前場景replacePrevious(route)——取代之前的場景immediatelyResetRouteStack(routeStack)——用一組路線重置每個場景popToRoute(route)——彈出一個由它的路線指定的特定的場景。這之后所有的場景將被卸載popToTop()——彈出堆棧中的第一個場景,卸載其他場景通過 renderScene 函數(shù) navigator 對象對場景是可用的。對象有所有的導(dǎo)航方法,以及一些實用程序:
parentNavigator——父導(dǎo)航對象的參考,在 props.navigator 中被傳遞onWillFocus——用來向父導(dǎo)航器傳遞一個導(dǎo)航焦點事件onDidFocus——用來向父導(dǎo)航器傳遞一個導(dǎo)航焦點事件configureScene 函數(shù)型
可選功能,允許配置場景動畫和手勢。將由路線調(diào)用,且應(yīng)該返回一個場景配置對象
(route) => Navigator.SceneConfigs.FloatFromRight
initialRoute 對象型
提供一個單一的“路線”來開始。路線是一個任意的對象,導(dǎo)航器將使用它在場景呈現(xiàn)之前確定每個場景。initialRoute 或 initialRouteStack 是必需的。
initialRouteStack [對象型]
提供一組路線來呈現(xiàn)最初的場景。如果沒有提供 initialRoute,那么該道具就會被需求。
navigationBar 節(jié)點型
以可選的方式提供一個能夠存留在場景之間轉(zhuǎn)換的導(dǎo)航欄
navigator 對象型
以可選的方式從父導(dǎo)航器提供 navigator 對象
onDidFocus 函數(shù)型
在場景過渡完成后或在最初安裝后該函數(shù)會被每個場景的新路線調(diào)用。這將覆蓋在 this.props.navigator 的onDidFocus處理程序上。
onItemRef 函數(shù)型
當(dāng)場景參考發(fā)生變化時,該函數(shù)會被調(diào)用 (ref,indexInStack)
onWillFocus 函數(shù)型
將在安裝中和每個導(dǎo)航轉(zhuǎn)換之前發(fā)射目標(biāo)路線,覆蓋this.props.navigator中的處理程序。這將覆蓋this.props.navigator 中的 onDidFocus 處理程序
renderScene 函數(shù)型
對于一個給定的路線哪一個場景會出現(xiàn)需要該函數(shù)。將由路線和 navigator 對象調(diào)用。
(route, navigator) =>
<MySceneComponent title={route.title} />
sceneStyle View#style
設(shè)置樣式,以應(yīng)用于每個場景的容器中。