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

作者: cayman 分类: React Navigation 发布时间: 2017-06-13 13:23

通常在移动应用中组合各种形式的导航。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

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注