1.2 React Navigation 中文文档 -标签 选项卡 导航器

通常在移动应用中组合各种形式的导航。React Navigation中的路由器和导航器是可组合的，它允许您为应用程序定义一个复杂的导航结构。

对于我们的聊天应用程序，我们要在第一个屏幕上放置几个选项卡，查看最近的聊天线程或所有联系人。

介绍Tab Navigator

让我们创造一个新的：TabNavigatorApp.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 },
});

因为被用作屏幕，我们可以给它：MainScreenNavigatornavigationOptions

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

也可以在每个标签中添加一个按钮，链接到聊天：

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

现在我们将一个导航仪放在另一个导航仪中，我们可以在导航仪之间：navigate