(申明: 此系列教程,轉載旋之華微信公眾號,如有侵權 . 通知刪除~)

(大家可以添加他的微信公眾號了解更多內容.)

image.png

在開發中，我們需要實現多個界面的切換，這時候就需要一個導航控制器來進行各種效果的切換。那么，在React Native中有兩個組件能夠實現這樣的效果：Navigator和NavigatorIOS。

   其中Navigator是適配Android和iOS，而NavigatorIOS則是

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

image

一、Navigator

   很多時候，我們需要導航器來應對不同場景（頁面）間的切換。它通過路由對象來分辨不同的場景，我們這里采用的就是 `renderScene` 方法，根據指定的路由來渲染。

1.1 常用的屬性

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

這個指定了默認的頁面，也就是啟動的組件頁面

** configureScene ={() => {**

return Navigator. SceneConfigs .HorizontalSwipeJump;

}}

頁面之間跳轉時候的動畫手勢，可以看這個目錄:

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳轉的時候的方向)，比如：

PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump

等等。

** renderScene **

具體是方法如下:

(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />

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

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

**initialRouteStack [object] 參數對象數組 **

   這是一個初始化的路由數組進行初始化。如果initalRoute屬性沒有設置的話，那么就必須設置initialRouteStack屬性，使用該最后一項作為初始路由。 如果initalRouteStack屬性沒有設置的話，該會生成只包含initalRoute值的數組

**navigationBar node **

該為可選的參數，在頁面切換中用來提供一個導航欄

navigator object

該為可選參數，可以從父類導航器中獲取導航器對象

sceneStyle 樣式風格

該繼承了View視圖的所有樣式風格，用于設置每個頁面容器的風格

1.2 常用的導航器方法

當獲取了導航器對象的引用，我們可以進行調用以下一些方法來實現頁面導航功能:

getCurrentRoutes()

該進行返回存在的路由列表信息

jumpBack()

該進行回退操作 但是該不會卸載(刪除)當前的頁面

jumpForward()

進行跳轉到相當于當前頁面的下一個頁面

jumpTo(route)

根據傳入的一個路由信息，跳轉到一個指定的頁面(該頁面不會卸載刪除)

push(route)

 導航切換到一個新的頁面中，新的頁面進行壓入棧。通過jumpForward()方法可以回退過去

pop()

當前頁面彈出來，跳轉到棧中下一個頁面，并且卸載刪除掉當前的頁面

replace(route)

只用傳入的路由的指定頁面進行替換掉當前的頁面

replaceAtIndex(route,index)

傳入路由以及位置索引，使用該路由指定的頁面跳轉到指定位置的頁面

replacePrevious(route)

傳入路由，通過指定路由的頁面替換掉前一個頁面

resetTo(route)

進行導航到新的界面，并且重置整個路由棧

immediatelyResetRouteStack(routeStack)

該通過一個路由頁面數組來進行重置路由棧

popToRoute(route)

進行彈出相關頁面，跳轉到指定路由的頁面，彈出來的頁面會被卸載刪除

popToTop()

進行彈出頁面，導航到棧中的第一個頁面，彈出來的所有頁面會被卸載刪除

1.3 默認寫法

<pre style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; color: rgb(62, 62, 62); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><

Navigator

initialRoute

=

{{

name

:

defaultName

,

component

:

defaultComponent

}}

configureScene

=

{(

route

) => {

return

Navigator.

SceneConfigs

.

HorizontalSwipeJumpFromRight

;
}}

renderScene

=

{(

route

,

navigator

) => {

let

Component

=

route

.

component

;

return

<

Component

{...

route

.

props

}

navigator

=

{

navigator

} />
}}
/></pre>

二、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"和任何其它的導航函數的參數都是這樣的路由對象。

   比如：下面新聞列表跳轉到新聞詳情頁詳情頁：

  ![image](http://upload-images.jianshu.io/upload_images/7403773-0f51eeb296a6c4a5?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

itemWrapperStyle View#style

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

navigationBarHidden bool

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

**shadowHidden bool **

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

**tintColor string **

導航欄上按鈕的顏色。

** titleTextColor string **

導航器標題的文字顏色。

**translucent bool **

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

三、綜合小案例

****3.1 部分核心代碼****

image

image

****3.2 運行效果圖****

image

圖1-1 新聞列表頁

image

圖1-2 新聞詳情頁

image

圖1-3 個人中心頁面