嵌套導(dǎo)航器

在手機(jī)app上經(jīng)常有各種形式的導(dǎo)航器進(jìn)行組合。
在React中路由和導(dǎo)航器都是可以組合的，這樣可以讓你定義一些復(fù)雜的導(dǎo)航器在你的APP中。
在我們的聊天應(yīng)用中，我們通過放入幾個(gè)標(biāo)簽在第一個(gè)個(gè)場(chǎng)景/頁(yè)面中去看到最近的聊天界面和所有的聯(lián)系人。

標(biāo)簽導(dǎo)航器介紹

讓我們先創(chuàng)建一個(gè) TabNavigator 在 App.js文按中:

class RecentChatsScreen extends React.Component {
  render() {
    return <Text>List of recent chats</Text>
  }
}

class AllContactsScreen extends React.Component {
  render() {
    return <Text>List of all contacts</Text>
  }
}

const MainScreenNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});

如果把MainScreenNavigator 作為最頂層的導(dǎo)航器組件將會(huì)是這樣的：simple-tabs

嵌套導(dǎo)航器在場(chǎng)景/頁(yè)面中

我們讓這些標(biāo)簽都在app的第一個(gè)頁(yè)面都是可以見的，但是每個(gè)新的場(chǎng)景/頁(yè)面在棧中都是覆蓋其他標(biāo)簽的。

讓我們添加一個(gè)標(biāo)簽導(dǎo)航器并通過之前的一些步驟作為StackNavigator導(dǎo)航器棧頂?shù)膱?chǎng)景/頁(yè)面

const SimpleApp = StackNavigator({
  Home: { screen: MainScreenNavigator },
  Chat: { screen: ChatScreen },
});

因?yàn)?MainScreenNavigator 將用作為一個(gè)場(chǎng)景/頁(yè)面，所以我們?yōu)樗O(shè)置 navigationOptions：

MainScreenNavigator.navigationOptions = {
  title: 'My Chats',
};

我們同時(shí)添加一個(gè)按鈕用作連接不同標(biāo)簽中的聊天。

<Button
  onPress={() => this.props.navigation.navigate('Chat', { user: 'Lucy' })}
  title="Chat with Lucy"
/>

現(xiàn)在我們可以將一個(gè)導(dǎo)航器放到另外一個(gè)導(dǎo)航器里面，同時(shí)我們通過navigate方法在不同導(dǎo)航器中跳轉(zhuǎn)

nested