Question

我必须创建一个带有选项卡本机的屏幕。屏幕底部将完成3个选项卡。每个屏幕的顶部都有3个标签。谁能告诉我要实施相同的操作。

下面是示例屏幕，我正在尝试实施enter image description here

Answer 1

好吧，您可以通过水平滚动视图使自己成为自己。但是，我认为最好的方法是安装此组件： https://github.com/react-native-community/react-native-tab-view

我希望它能对您有所帮助。

Answer 2

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, marginTop: 30 }}>
        {/*Example of Tab Indicator*/}
        <IndicatorViewPager
          style={{ flex: 1, paddingTop: 20, backgroundColor: 'white' }}
          indicator={this._renderTabIndicator()}>
          {/*_renderTabIndicator() will return the PagerTabIndicator*/}
          <View
            style={{
              backgroundColor: '#C70039',
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{ color: 'white', fontSize: 30 }}>One</Text>
          </View>
          <View
            style={{
              backgroundColor: '#FF5733',
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{ color: 'white', fontSize: 30 }}>Two</Text>
          </View>
          <View
            style={{
              backgroundColor: '#FFC300',
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{ color: 'white', fontSize: 30 }}>Three</Text>
          </View>
        </IndicatorViewPager>
      </View>
    );
  }

  _renderTabIndicator() {
    let tabs = [
      {
        text: 'One',
      },
      {
        text: 'Two',
      },
      {
        text: 'Three',
      },
    ];
    return <PagerTabIndicator tabs={tabs} />;
  }
}

以上代码可能会帮助您实现所需的目标。

反应本机Tab实现

2 个答案: