如何在 React Native 屏幕中创建选项卡式内容答案

【问题标题】：How to create tabbed content inside a React Native screen如何在 React Native 屏幕中创建选项卡式内容
【发布时间】：2018-11-05 11:31:22
【问题描述】：

我正在使用 React-Native、Expo 和 React-Navigation。

在我的应用程序中，我有一个呈现结果的搜索组件，但我希望有两个不同结果类型的选项卡，可以单击。

我似乎找不到执行此操作的组件，TabNavigator 似乎是更改整个屏幕，但我在许多其他 RN 应用程序中看到了此功能，所以我附上了一个类似组件的屏幕截图想要。

了解关注、流行和探索是不同的标签，在这种情况下，线条平滑地动画以在活动标签下划线。

有没有一个组件可以做到这一点？

【问题讨论】：

标签： javascript reactjs react-native expo native-base

【解决方案1】：

我最终使用了 Native Base 的 Tabs 组件

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs } from 'native-base';
import Tab1 from './tabOne';
import Tab2 from './tabTwo';
import Tab3 from './tabThree';

export default class TabsExample extends Component {
  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs>
          <Tab heading="Tab1">
            <Tab1 />
          </Tab>
          <Tab heading="Tab2">
            <Tab2 />
          </Tab>
          <Tab heading="Tab3">
            <Tab3 />
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

【讨论】：