如何在React Native中创建自定义底部选项卡栏？

Question

我想创建一个如下所示的底部标签栏而不使用react-native-material-bottom-navigation之类的任何库，因为我不想要任何标签用于我的Bottom Tabbars＆amp;该库没有选项使标签可选。它还提供了我使用它时看起来很奇怪的动画。

现在我尝试实现一个简单的标签栏导航，如下所示 -

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { screen: 1 };
    this.changeScreen = this.changeScreen.bind(this);
  }

  changeScreen() {
    switch (this.state.screen) {
      case 1:
        return <FirstTabScreen />;
      case 2:
        return <SecondTabScreen />;
    }
  }

  changeActiveTab(screen) {
    this.setState({ screen });
  }

  render() {
    return (
      <View>
        <View>
          {this.changeScreen()}
        </View>
        <Footer changeActiveTab={this.changeActiveTab} />
      </View>
    );
  }
}

export default App;

Footer.js

class Footer extends Component {
  render() {
    const { changeActiveTab } = this.props;
    return (
      <View>
        <TouchableOpacity onPress={() => changeActiveTab(1)}>
          <Icon name="FirstTabScreen" />
          <Icon name="SecondTabScreen" />
        </TouchableOpacity>
      </View>
     );
  }
}

它给出错误this.setState()不是函数

如何实现这个？

Answer 1

哦，开玩笑！得到了答案

构造函数中错过了this.changeActiveTab = this.changeActiveTab.bind(this);

现在到处开始使用箭头功能