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

Question

我正在使用带有Expo和React-Navigation的React-Native。

在我的App中，我有一个呈现结果的搜索组件，但我想有两个不同结果类型的标签，可以单击这些标签。

我似乎找不到能做到这一点的组件，TabNavigator似乎可以改变整个屏幕，但是我已经在许多其他RN Apps中看到了此功能，因此我将类似组件的屏幕快照附加到我的屏幕上想要。

查看“关注”，“热门”和“探索”是如何不同的选项卡，在这种情况下，该行会平滑地进行动画处理以在活动选项卡下划线。

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

Answer 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>
    );
  }
}