如何使用本机基本组件更改React本机应用程序中的选项卡

Question

i有一个主屏幕，其中包含2个选项卡，其中每个选项卡都呈现不同的结果。在第一个选项卡的末尾，我有两个按钮：第一个按钮->重定向到第一个选项卡的第一年（默认选项卡）第二个按钮->重定向到第一个选项卡的版本2年因此，基本上，每次选择按钮时，按钮都会重定向到其他选项卡。我只需要更改选项卡，而不是整个屏幕。这是我使用的代码，它对于默认选项卡工作正常，但是我不知道如何实现按钮，以便通过更改主屏幕将其重定向到不同的选项卡...有帮助吗？

主屏幕：

<Tabs>
    <Tab heading="First Tab">
        <FirstTab text={key} />
    </Tab>
    <Tab heading="Second Tab">
        <SecondTab/>
    </Tab>
</Tabs>

第一个选项卡（默认选项卡）

<ScrollView>
                ...
                    <View style={{flexDirection: 'row'}}>
                        <Button active>
                            <Text>
                                year 1 
                            </Text>
                        </Button>
                        <Button>
                            <Text> year 2  </Text>
                        </Button>
                    </View>
                </View>
</ScrollView>

这里是一张图片，解释了我需要做什么：

我也尝试过这种方法：Implementing Footer Tabs in Native React using Native Base，我使用的代码是：

<Tabs>
    <Tab>
        <Content>{this.renderSelectedTab()} </Content>
    </Tab>
    <Tab>
        <SecondTab/>
    </Tab>
</Tabs>
<View style={{flexDirection: 'row'}}>
    <Button active={this.selectedTab==='2016'}
            onPress={() => this.state.setState({selectedTab: '2016'})}>
                  <Text> 2016 </Text>
    </Button>

    <Button active={this.state.selectedTab==='2015'}
            onPress={() => this.setState({selectedTab: '2015'})} >
                <Text> 2015 </Text>
    </Button>
</View>

..

renderSelectedTab () {
   console.log("this.state.selectedTab", this.selectedTab )
        switch (this.state.selectedTab) {
            case '2016':
                return (<Tab2016 />);
                break;
            case '2015':
                return (<Tab2015 />);
                break;
            default:
                return (<Tab2016 />);
        }
    }

我得到

如果我使用this.selectedTab而不是this.state.selectedTab，它运行正常，但进入控制台：，它直接运行默认值，按钮不起作用

Answer 1

实际上，这不是它的工作原理。您需要使用Tabs组件的页面和initialPage属性，然后更改标签，您只需要将页面Pros更新到选项卡索引

所以是一个例子：

import React from 'react';
import { Button, Text } from 'react-native';
import { Container, Header, Content, Tab, Tabs } from 'native-base';

export default class AuthScreenContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {activeTab: 0, initialTab: 0}
  }

  render() {
    return (
        <Container>
          <Tabs initialPage={this.state.initialTab} page={this.state.activeTab}>
            <Tab heading="Sign up">
              <Text>This is the register's content </Text>
              <Button
                  title="Go to login tab"
                  onPress={() => this.setState({activeTab: 1})}
              />
            </Tab>
            <Tab heading="Login">
              <Text>This is the login's content </Text>
              <Button
                  title="Go to register tab"
                  onPress={() => this.setState({activeTab: 0})}
              />
            </Tab>
          </Tabs>
        </Container>
    );
  }
};