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

Question

我有一个包含 2 个选项卡的主屏幕，每个选项卡都呈现不同的结果。在第一个选项卡的末尾，我有两个按钮：第一个按钮->重定向到第一个选项卡第 1 年（默认选项卡）第二个按钮->重定向到第一个选项卡版本第 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 组件的 page 和 initialPage 道具，然后更改选项卡您只需将页面道具更新为选项卡索引

这是一个例子：

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