时间戳

首页 > 解决方案 > 反应导航的 TabNavigator 上方的组件

reactjs - 反应导航的 TabNavigator 上方的组件

问题描述

我需要创建一个简单的布局。我有一个标题组件，在它下面我有一个包含内容的导航选项卡（参见草图 - https://imgur.com/a/9H7FMYU）。我希望通过反应导航或反应本机导航来实现这一点。我不想使用 react-native-tab-view 的原因是它没有维护并且有很多错误。

编辑：我刚刚发现 React 导航使用 react-native-tab-view 来显示选项卡。因此，如果您正在寻找解决方案，请使用@user:568754 回答下面的问题或使用带有标题的 react-native-tab-view

标签： reactjsreact-nativereact-navigation

解决方案

我认为您正在寻找的是反应导航中的 MaterialTopTabNavigator 组件。

这是一些示例代码：

import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

class Head extends React.Component {
  render() {
    return (
      <View style={{ height: 200, backgroundColor: 'blue' }}/>
    );
  }
}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createMaterialTopTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

const RootNav = createAppContainer(TabNavigator);

class RootScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Head />
        <RootNav />
      </View>
    );
  }
}

export default RootScreen;

以及可预览的世博小吃链接：https ://snack.expo.io/@bra/creatematerialtoptabnavigator-example

推荐阅读