【翻译】ReactNavigation/Nesting Navi

由多种形式导航构成的移动应用是很常见的。在React Navigation中，路由和导航都是存在的，允许你为应用构建复杂的导航结构。在我们的聊天会话应用中，我们想要在一个组件场景中放入一个tab标签，来浏览最近的会话记录或者所有的联系人。

Introducing Tab Navigator-tab导航简介

让我们在App.js中创建一个新的tab导航(TabNavigation):

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 **场景组件作为导航的顶层组件，应用将会看起来像这样：

simple-tabs-iphone.png

Nesting a Navigator in a screen-一个场景中嵌套一个导航

我们想要这些tab标签在应用中的一个场景中出现，但是导航栈中新的场景可以覆盖这些tab标签。
让我们将tabs导航作为一个顶层场景组件添加到我们之前创建的StackNavigator导航中。

const SimpleApp = StackNavigator({
  Home: { screen: MainScreenNavigator },
  Chat: { screen: ChatScreen },
});

由于MainScreenNavigator已经成为SimpleApp的一个场景组件，我们可以设置navigationOptions。

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

注意：MainScreenNavigator本质上是一个React组件类，可以设置静态方法 navigationOptions。

让我们给每一个tab标签也添加一个按钮来链接到一个聊天会话场景。

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

现在我们已经将一个导航器（navigator）嵌套到另外一个中。我们可以在导航器之间使用navigate方法。

nested-iphone.png.gif

注意： 导航器的分类 、嵌套与跳转

• 分类：StackNavigator为screen路由切换，TabNavigator为tab路由切换。
• 嵌套：StackNavigator与TabNavigator可以相互多层嵌套。
• 跳转：多层嵌套时，不同层级的组件场景都可以通过navigate（title）方法进行跳转。