1.2 React Navigation 中文文档 -标签 选项卡 导航器
通常在移动应用中组合各种形式的导航。React Navigation中的路由器和导航器是可组合的,它允许您为应用程序定义一个复杂的导航结构。
对于我们的聊天应用程序,我们要在第一个屏幕上放置几个选项卡,查看最近的聊天线程或所有联系人。
介绍Tab Navigator
让我们创造一个新的:TabNavigator
App.js
import { TabNavigator } from "react-navigation";
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


在屏幕中嵌入导航器
我们希望这些选项卡在应用的第一个屏幕中可见,但是堆叠中的新屏幕应该覆盖选项卡。
让我们的选项卡导航器作为我们在上一步中设置的顶层的屏幕。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

