嵌套導(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)景/頁面中去看到最近的聊天界面和所有的聯(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)景/頁面中
我們讓這些標(biāo)簽都在app的第一個(gè)頁面都是可以見的腊徙，但是每個(gè)新的場(chǎng)景/頁面在棧中都是覆蓋其他標(biāo)簽的简十。
讓我們添加一個(gè)標(biāo)簽導(dǎo)航器并通過之前的一些步驟作為StackNavigator導(dǎo)航器棧頂?shù)膱?chǎng)景/頁面
const SimpleApp = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
});
因?yàn)?MainScreenNavigator 將用作為一個(gè)場(chǎng)景/頁面檬某，所以我們?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
