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

我有一个主屏幕，其中包含两个选项卡，每个选项卡呈现不同的结果。 在第一个选项卡的末尾，我有两个按钮：第一个按钮-->重定向到第一个选项卡第1年（默认选项卡） 第二个按钮-->重定向到第二年的第一个选项卡版本 因此，基本上，每次选择按钮时，按钮都会重定向到不同的选项卡。我只需要更改选项卡，而不是整个屏幕。 这是我使用的代码，它在默认选项卡上运行良好，但我不知道如何实现这些按钮，以便在更改主屏幕时重定向到不同的选项卡。。。有什么帮助吗

主屏幕：

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

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

...
第一年
第二年

下面是一张图片，说明了我需要做什么：

我也尝试过这种方法：我使用的代码是：

<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>

{this.renderSelectedTab（）}
this.state.setState（{selectedTab:'2016'}）}>
2016
this.setState（{selectedTab:'2015'}）}>
2015

renderSelectedTab（）{
console.log（“this.state.selectedTab”，this.selectedTab）
开关（此.state.selectedTab）{
“2016”案：
返回（）；
打破
“2015”案：
返回（）；
打破
违约：
返回（）；
}
}

我得到

---

如果我使用this.selectedTab而不是this.state.selectedTab它运行正常，但我进入控制台：它直接运行默认值，按钮不工作实际上，它不是这样工作的。 您需要使用选项卡组件的页面和初始页面道具，然后要更改选项卡，只需将页面道具更新到选项卡索引

这就是一个例子：

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

从“React”导入React；
从“react native”导入{按钮，文本}；
从“本机基”导入{容器、标题、内容、选项卡、选项卡}；
导出默认类AuthScreenContent扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={activeTab:0，initialTab:0}
}
render（）{
返回(
这是登记册的内容
this.setState（{activeTab:1}）}
/>
这是登录的内容
this.setState（{activeTab:0}）}
/>
);
}
};

您是否已将renderSelectedTab函数绑定到构造函数中？您好，我刚刚解决了我的问题，谢谢。。但是我被困在如何改变按钮按下时的样式上了。。完成后我会发布完整的答案，这对你很有用@user3521011你解决了吗？嘿@SupriyaKalghatgi我解决了部分问题，但仍然不知道如何在按下或不按下按钮时更改按钮的样式。。实际上，我在native base的官方文档或任何其他来源中都找不到任何东西。。你知道怎么做吗？谢谢你的帮助

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

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