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

我想创建一个如下所示的底部选项卡栏，而不使用任何库，因为我不希望底部选项卡栏有任何标签&库没有使标签可选的选项。它还提供了动画，当我使用它时，它看起来很奇怪

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

App.js

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={screen:1}；
this.changeScreen=this.changeScreen.bind（this）；
}
changeScreen（）{
开关（this.state.screen）{
案例1：
返回；
案例2：
返回；
}
}
更改活动选项卡（屏幕）{
这个.setState（{screen}）；
}
render（）{
返回(
{this.changeScreen（）}
);
}
}
导出默认应用程序；

Footer.js

类页脚扩展组件{
render（）{
const{changeActiveTab}=this.props；
返回(
changeActiveTab（1）}>
);
}
}

---

它给出了一个错误

this.setState（）

不是一个函数Oh bugger！！得到答案了吗

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;

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