button - 如何使用 native 基础组件更改 native 应用程序中的选项卡

Question

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

主屏幕 :

<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 组件的 page 和 initialPage 属性 然后要更改标签，您只需要 将页面 Prop 更新为标签索引

这是一个例子:

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