问react导航的TabNavigator上的组件
EN

Stack Overflow用户

提问于 2019-02-13 12:54:26

回答 1查看 1K关注 0票数 2

我需要创建一个简单的布局。我有一个header组件，在它下面我有一个带有内容的导航选项卡(参见sketch - https://imgur.com/a/9H7FMYU)。我希望通过react导航或react本机导航来实现这一点。我不想使用react-native-tab-view的原因是因为它不需要维护，并且有很多bug。

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

reactjs

react-native

react-navigation

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-13 14:17:56

我认为您正在寻找的是react-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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54662766

复制

相似问题

问react导航的TabNavigator上的组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react导航的TabNavigator上的组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react导航的TabNavigator上的组件
EN