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

Question

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

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

我似乎找不到一个组件可以做到这一点，TabNavigator 似乎可以改变整个屏幕，但我在许多其他 RN 应用程序中看到过这个功能，所以我附上了一个类似组件的屏幕截图我想要什么。

看看“关注”、“热门”和“探索”是如何不同的选项卡，以及本例中的线条如何流畅地动画以在活动选项卡下划线。

是否有可以执行此操作的组件？

Answer 1

我最终使用了 Native Base

中的选项卡组件

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

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

How to create tabbed content inside a React Native screen

javascript

reactjs

react-native

expo

native-base