# 嵌套导航器

嵌套导航器

在手机app上经常有各种形式的导航器进行组合。
在React中路由和导航器都是可以组合的，这样可以让你定义一些复杂的导航器在你的APP中。
在我们的聊天应用中，我们通过放入几个标签在第一个个场景/页面中去看到最近的聊天界面和所有的联系人。

标签导航器介绍

让我们先创建一个 TabNavigator 在 App.js文按中:

class RecentChatsScreen extends React.Component {
  render() {
    return List of recent chats
  }
}

class AllContactsScreen extends React.Component {
  render() {
    return List of all contacts
  }
}

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',
};

我们同时添加一个按钮用作连接不同标签中的聊天。

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

现在我们可以将一个导航器放到另外一个导航器里面，同时我们通过navigate方法在不同导航器中跳转

nested