React-navigation 官方文档中文翻译(二) Nesting Navigators

版本号: 1.0.0-beta.12

Nesting Navigators

通常在移动应用中组合各种形式的导航。React Navigation中的路由器和导航器是可组合的，它允许您为应用程序定义一个复杂的导航结构。对于我们的聊天应用程序，我们要在第一个屏幕上放置几个选项卡，查看最近的聊天线程或所有联系人。

介绍TabNavigator

让我们在我们的App.js里创建一个新的TabNavigator:

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被渲染为顶级导航器组件，它将如下所示：

在屏幕中嵌入导航器(ps:到底是称为屏幕好点还是页面好点还是个事儿)

我们希望这些选项卡在应用的第一个屏幕中可见，但是堆叠中的新屏幕应该覆盖选项卡。让我们的选项卡导航器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：

React-navigation 官方文档中文翻译(三) Configuring the Header