嵌套导航器
在手机app上经常有各种形式的导航器进行组合。
在React中路由和导航器都是可以组合的,这样可以让你定义一些复杂的导航器在你的APP中。
在我们的聊天应用中,我们通过放入几个标签在第一个个场景/页面中去看到最近的聊天界面和所有的联系人。
标签导航器介绍
让我们先创建一个 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
作为最顶层的导航器组件将会是这样的:simple-tabs
嵌套导航器在场景/页面中
我们让这些标签都在app的第一个页面都是可以见的,但是每个新的场景/页面在栈中都是覆盖其他标签的。
让我们添加一个标签导航器并通过之前的一些步骤作为StackNavigator
导航器栈顶的场景/页面
const SimpleApp = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
});
因为 MainScreenNavigator
将用作为一个场景/页面,所以我们为它设置 navigationOptions
:
MainScreenNavigator.navigationOptions = {
title: 'My Chats',
};
我们同时添加一个按钮用作连接不同标签中的聊天。
<Button
onPress={() => this.props.navigation.navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
现在我们可以将一个导航器放到另外一个导航器里面,同时我们通过navigate
方法在不同导航器中跳转
nested