RN-Navigator

使用導(dǎo)航器可以讓你在應(yīng)用的不同場(chǎng)景(頁(yè)面)間進(jìn)行切換库车。導(dǎo)航器通過(guò)路由對(duì)象來(lái)分辨不同的場(chǎng)景。利用renderScene
方法樱拴,導(dǎo)航欄可以根據(jù)指定的路由來(lái)渲染場(chǎng)景柠衍。
可以通過(guò)configureScene
屬性獲取指定路由對(duì)象的配置信息洋满,從而改變場(chǎng)景的動(dòng)畫(huà)或者手勢(shì)。查看Navigator.SceneConfigs
來(lái)獲取默認(rèn)的動(dòng)畫(huà)和更多的場(chǎng)景配置選項(xiàng)珍坊。
譯注:本文檔的說(shuō)明較為簡(jiǎn)略牺勾,使用上有一定的難度。論壇中有一篇更為詳細(xì)的教程阵漏,推薦閱讀禽最。
截圖



基本用法

<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();
    }
  }}
  />
}
/>

或者更簡(jiǎn)易一些的

<TabNavigator>
  {/*--------------首頁(yè)--*/}
  <TabNavigator.Item
    title = "首頁(yè)"
    renderIcon={() => <Image source={{uri:'icon_tabbar_homepage'}}  style={styles.iconStyle}/>}
    renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_homepage_selected'}} style={styles.iconStyle}/>}//選中圖標(biāo)
    onPress={()=>{this.setState({selectedTab:'home'})}}
    selected={this.state.selectedTab === 'home'}
  >
  <Navigator
    initialRoute={{name: '首頁(yè)', component:Home}}
    configureScene={()=>{
      return Navigator.SceneConfigs.PushFromRight;
  }}
  renderScene={(route, navigator) =>{
    let Component = route.component;
      return <Component {...route.passProps} navigator={navigator}/>;
  }}
  />

  </TabNavigator.Item>
</TabNavigator>

導(dǎo)航方法
如果你得到了一個(gè)navigator對(duì)象的引用(譯注:再次推薦仔細(xì)閱讀此教程,理解如何在renderScene方法中傳遞navigator對(duì)象袱饭,否則直接調(diào)用會(huì)報(bào)undefined錯(cuò)誤)川无,則可以調(diào)用許多方法來(lái)進(jìn)行導(dǎo)航:
getCurrentRoutes() - 獲取當(dāng)前棧里的路由,也就是push進(jìn)來(lái)虑乖,沒(méi)有pop掉的那些懦趋。
jumpBack() - 跳回之前的路由,當(dāng)然前提是保留現(xiàn)在的疹味,還可以再跳回來(lái)仅叫,會(huì)給你保留原樣。
jumpForward() - 上一個(gè)方法不是調(diào)到之前的路由了么糙捺,用這個(gè)跳回來(lái)就好了诫咱。
jumpTo(route) - 跳轉(zhuǎn)到已有的場(chǎng)景并且不卸載。
push(route) - 跳轉(zhuǎn)到新的場(chǎng)景洪灯,并且將場(chǎng)景入棧坎缭,你可以稍后跳轉(zhuǎn)過(guò)去
pop() - 跳轉(zhuǎn)回去并且卸載掉當(dāng)前場(chǎng)景
replace(route) - 用一個(gè)新的路由替換掉當(dāng)前場(chǎng)景
replaceAtIndex(route, index) - 替換掉指定序列的路由場(chǎng)景
replacePrevious(route) - 替換掉之前的場(chǎng)景
resetTo(route) - 跳轉(zhuǎn)到新的場(chǎng)景,并且重置整個(gè)路由棧
immediatelyResetRouteStack(routeStack) - 用新的路由數(shù)組來(lái)重置路由棧
popToRoute(route) - pop到路由指定的場(chǎng)景签钩,在整個(gè)路由棧中掏呼,處于指定場(chǎng)景之后的場(chǎng)景將會(huì)被卸載。
popToTop() - pop到棧中的第一個(gè)場(chǎng)景铅檩,卸載掉所有的其他場(chǎng)景憎夷。

屬性
configureScene function
可選的函數(shù),用來(lái)配置場(chǎng)景動(dòng)畫(huà)和手勢(shì)昧旨。會(huì)帶有兩個(gè)參數(shù)調(diào)用拾给,一個(gè)是當(dāng)前的路由,一個(gè)是當(dāng)前的路由棧兔沃。然后它應(yīng)當(dāng)返回一個(gè)場(chǎng)景配置對(duì)象
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

Navigator.SceneConfigs.PushFromRight (默認(rèn))
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 object
定義啟動(dòng)時(shí)加載的路由蒋得。路由是導(dǎo)航欄用來(lái)識(shí)別渲染場(chǎng)景的一個(gè)對(duì)象。initialRoute
必須是initialRouteStack
中的一個(gè)路由粘拾。initialRoute
默認(rèn)為initialRouteStack
中最后一項(xiàng)窄锅。

initialRouteStack [object]
提供一個(gè)路由集合用來(lái)初始化创千。如果沒(méi)有設(shè)置初始路由的話則必須設(shè)置該屬性缰雇。如果沒(méi)有提供該屬性入偷,它將被默認(rèn)設(shè)置成一個(gè)只含有initialRoute
的數(shù)組。

navigationBar node
可選參數(shù)械哟,提供一個(gè)在場(chǎng)景切換的時(shí)候保持的導(dǎo)航欄疏之。

navigator object
可選參數(shù),提供從父導(dǎo)航器獲得的導(dǎo)航器對(duì)象暇咆。

onDidFocus function
每當(dāng)導(dǎo)航切換完成或初始化之后锋爪,調(diào)用此回調(diào),參數(shù)為新場(chǎng)景的路由爸业。

onWillFocus function
會(huì)在導(dǎo)航切換之前調(diào)用其骄,參數(shù)為目標(biāo)路由。

renderScene function
必要參數(shù)扯旷。用來(lái)渲染指定路由的場(chǎng)景拯爽。調(diào)用的參數(shù)是路由和導(dǎo)航器。
(route, navigator) => <MySceneComponent title={route.title} navigator={navigator} />

sceneStyle View#style
將會(huì)應(yīng)用在每個(gè)場(chǎng)景的容器上的樣式钧忽。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末毯炮,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子耸黑,更是在濱河造成了極大的恐慌桃煎,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件大刊,死亡現(xiàn)場(chǎng)離奇詭異为迈,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)缺菌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)曲尸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人男翰,你說(shuō)我怎么就攤上這事另患。” “怎么了蛾绎?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵昆箕,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我租冠,道長(zhǎng)鹏倘,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任顽爹,我火速辦了婚禮纤泵,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘镜粤。我一直安慰自己捏题,他們只是感情好玻褪,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著公荧,像睡著了一般带射。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上循狰,一...
    開(kāi)封第一講書(shū)人閱讀 50,084評(píng)論 1 291
  • 那天窟社,我揣著相機(jī)與錄音,去河邊找鬼绪钥。 笑死灿里,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的程腹。 我是一名探鬼主播钠四,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼跪楞!你這毒婦竟也來(lái)了缀去?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤甸祭,失蹤者是張志新(化名)和其女友劉穎缕碎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體池户,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡咏雌,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了校焦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赊抖。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖寨典,靈堂內(nèi)的尸體忽然破棺而出氛雪,到底是詐尸還是另有隱情,我是刑警寧澤耸成,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布报亩,位于F島的核電站,受9級(jí)特大地震影響井氢,放射性物質(zhì)發(fā)生泄漏弦追。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一花竞、第九天 我趴在偏房一處隱蔽的房頂上張望劲件。 院中可真熱鬧,春花似錦、人聲如沸零远。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)遍烦。三九已至,卻和暖如春躺枕,著一層夾襖步出監(jiān)牢的瞬間服猪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工拐云, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留罢猪,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓叉瘩,卻偏偏與公主長(zhǎng)得像膳帕,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子薇缅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容