React Native 從入門到深入 -- Navigator、NavigatorIOS詳解

前言

在前端的開發中,我們需要實現多個頁面的切換跳轉,iOS中使用Navigation實現頁面的跳轉,react Native中使用Navigator和NavigatorIOS來實現不同頁面間的切換。

一。實現原理及屬性

導航器通過路由對象來分辨不同的場景,利用renderScene方法,導航欄可以根據指定的路由來渲染場景。

1.1導航跳轉方法

react中的路由的存儲方式通過棧來存儲的,有先進后出的特性。

getCurrentRoutes()

獲取當前棧里的路由,也就是push進來,沒有pop掉的那些

jumpBack()?

?跳回之前的路由,當然前提是保留現在的,還可以再跳回來,會給你保留原樣。

jumpForward()

上一個方法不是調到之前的路由了么,用這個跳回來就好了。

jumpTo(route)?

跳轉到已有的場景并且不卸載。

push(route)

跳轉到新的場景,并且將場景入棧,你可以稍后跳轉過去

pop()?

跳轉回去并且卸載掉當前場景

replace(route)

用一個新的路由替換掉當前場景

replaceAtIndex(route, index)?

?替換掉指定序列的路由場景

replacePrevious(route)?

?替換掉之前的場景

resetTo(route) ?

跳轉到新的場景,并且重置整個路由棧

immediatelyResetRouteStack(routeStack)

?用新的路由數組來重置路由棧

popToRoute(route)?

?pop到路由指定的場景,在整個路由棧中,處于指定場景之后的場景將會被卸載。

popToTop()

pop到棧中的第一個場景,卸載掉所有的其他場景。

1.2導航屬性

configureScene ?= {() =>{

return Navigator. SceneConfigs .HorizontalSwipeJump;

}}


可選的函數,用來配置場景動畫和手勢。會帶有兩個參數調用,一個是當前的路由,一個是當前的路由棧。然后它應當返回一個場景配置對象.

場景配置對象:

Navigator.SceneConfigs.PushFromRight (默認)

Navigator.SceneConfigs.FloatFromRight

Navigator.SceneConfigs.FloatFromLeft

Navigator.SceneConfigs.FloatFromBottom

Navigator.SceneConfigs.FloatFromBottomAndroid

Navigator.SceneConfigs.FadeAndroid

Navigator.SceneConfigs.HorizontalSwipeJump

Navigator.SceneConfigs.HorizontalSwipeJumpFromRight

Navigator.SceneConfigs.VerticalUpSwipeJump

Navigator.SceneConfigs.VerticalDownSwipeJump

??initialRoute ={{ name: 'home', component: HomeScene }}

定義啟動時加載的路由。路由是導航欄用來識別渲染場景的一個對象。initialRoute必須是initialRouteStack中的一個路由。initialRoute默認為initialRouteStack中最后一項。

initialRouteStack ? ? ?[object]

提供一個路由集合用來初始化。如果沒有設置初始路由的話則必須設置該屬性。如果沒有提供該屬性,它將被默認設置成一個只含有initialRoute的數組。

renderScene? function? (route, navigator) =><mySceneComponet title={route.title} navigator = {navigator}>?

兩個參數中的route包含的是initial的時候傳遞的name和component,而navigator是一個我們需要用的Navigator的對象;

所以當我們拿到route中的component的時候,我們就可以將navigator傳遞給它,正因為如此,我們的組件HomeScene才可以通過??this.props.navigator,拿到路由。

navigationBar ? ?node

可選參數,提供一個在場景切換的時候保持的導航欄。

navigator ? ?object

可選參數,提供從父導航器獲得的導航器對象。

onDidFocus ? ?function

每當導航切換完成或初始化之后,調用此回調,參數為新場景的路由。

onWillFocus ? function

會在導航切換之前調用,參數為目標路由。

sceneStyle ?和View的屬性樣式一樣

將會應用在每個場景的容器上的樣式。


1.3默認寫法

<Navigator

initialRoute={{name:defaultName,component:defaultComponent}}

configureScene={(route) => {

returnNavigator.SceneConfigs.HorizontalSwipeJumpFromRight;

}}

renderScene={(route,navigator) => {

letComponent=route.component;

return

}}

/>


二、Navigator.IOS

NavigatorIOS包裝了UIKit的導航功能,可以使用左劃功能來返回到上一界面。

2.1 ?常用的導航器方法

push(route)

導航器跳轉到一個新的路由。

pop()

回到上一頁。

popN(n)

回到N頁之前。當N=1的時候,效果和?pop()?一樣。

replace(route)

替換當前頁的路由,并立即加載新路由的視圖。

replacePrevious(route)

替換上一頁的路由/視圖。

replacePreviousAndPop(route)

替換上一頁的路由/視圖并且立刻切換回上一頁。

resetTo(route)

替換最頂級的路由并且回到它。

popToRoute(route)

一直回到某個指定的路由。

popToTop()

回到最頂層的路由。

2.2 ?常用的屬性

barTintColor?string

導航條的背景顏色。

initialRoute{

component: function, ? // 路由到對應的版塊

title: string, ? // 標題

passProps: object, ? // 傳遞的參數

backButtonIcon: Image.propTypes.source, ?// 返回按鈕

backButtonTitle: string, ?// 返回按鈕標題

leftButtonIcon:Image.propTypes.source,

leftButtonTitle: string,

onLeftButtonPress: function,

rightButtonIcon: Image.propTypes.source,

rightButtonTitle: string,

onRightButtonPress: function,

wrapperStyle: [object Object]

}

NavigatorIOS使用"路由"對象來包含要渲染的子視圖、它們的屬性、以及導航條配置。"push"和任何其它的導航函數的參數都是這樣的路由對象。

itemWrapperStyle ? ?View#style

導航器中的組件的默認屬性。一個常見的用途是設置所有頁面的背景顏色。

navigationBarHidden??bool

一個布爾值,決定導航欄是否隱藏。

shadowHidden?bool

一個布爾值,決定是否要隱藏1像素的陰影。

tintColor?string

導航欄上按鈕的顏色。

titleTextColor?string

導航器標題的文字顏色。

translucent?bool

一個布爾值,決定是否導航條是半透明的。


注:本組件并非由Facebook官方開發組維護。

這一組件的開發完全由社區主導。如果純js的方案能夠滿足你的需求的話,那么我們建議你選擇Navigator組件。

原理圖:


第一步。設置TabBar


NavigatorIOS在每個TabBarItem中設置

設置屬性:


運行結果:




在此學習過程中遇到的問題:


在設置TabBarItem是,只設置屬性,運行之后會報這個錯誤,是因為,TabBarItem中沒有組件,確實組件。

今天的完整代碼就不在上傳,后期會做一個簡單的小demo,將詳細的把這段時候學習的運用一下,由于今天有bug還有調試出來,固今天就不在上傳代碼。

謝謝啦!!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容