如何将活动状态添加到选项卡

我开始学习 React Native 2 周。在学习的同时，我尝试发展我想学习的东西，小东西。

我创建了导航选项卡，但没有使用路由器，只有状态。在过去的 3 天里，我试图弄清楚如何在每个选项卡上放置活动类，以查看当我单击每个选项卡时，活动类具有不同的颜色。

这是我的 App.js

import React, { Fragment } from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";

import Gator from "./Gator";
import Croco from "./Croco";
import Style from "./Style";

class App extends React.Component {
  state = {
    index: 0
  };

  getTab = index => {
    switch (index) {
      case 0:
        return <Gator />;
      case 1:
        return <Croco />;
      case 2:
        return <Style />;
      default:
        return <Croco />;
    }
  };

  setIndex(int) {
    this.setState({ index: int });
  }

  render() {
    return (
      <Fragment>
        <View style={style.tabsWrapper}>
          <View style={style.tabsContainer}>
            <TouchableOpacity onPress={() => this.setIndex(0)}>
              <View style={style.tabItem}>
                <Text style={[style.tabText]}>Croco</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.setIndex(1)}>
              <View style={style.tabItem}>
                <Text style={[style.tabText]}>Gator</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.setIndex(2)}>
              <View style={style.tabItem}>
                <Text style={[style.tabText]}>Style</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View>{this.getTab(this.state.index)}</View>
      </Fragment>
    );
  }
}

const style = StyleSheet.create({
  tabsWrapper: {
    backgroundColor: "#eeeeee",
    width: "100%",
    height: "5%",
    borderBottomColor: "#cccccc",
    borderBottomWidth: 2,
    marginBottom: 20
  },
  tabsContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    // margin: 30,
    // marginTop: 10,
    padding: 5,
    paddingTop: 10,
    marginLeft: 30,
    marginRight: 30,
    paddingBottom: 0,
    height: "20%"
  },
  tabItem: {
    alignItems: "center"
  },

  tabText: {
    fontFamily: "DINRoundPro-Bold",
    fontSize: 16,
    color: "#aaaaaa"
  }
});

export default App;

每个选项卡的其他组件只是在屏幕上显示一些文本。

我在网上测试过，所以你可以在react native sandbox上看到它。

有人可以帮我解决这种情况吗？