Question

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

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

这是我的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上看到它。

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

Answer 1

这只是解决问题的代码。使用状态值获取和更改参数。

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,
    backcolor: "",
    backcolor2:"",
    backcolor3:""
  };

  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 });
    this.backcolor(int)
  }

  backcolor(int) {
    if (int === 0) {
      this.setState({
        backcolor : "red",
        backcolor2:"",
        backcolor3:""
      })
    } else if(int === 1){
      this.setState({
        backcolor : "",
        backcolor2:"red",
        backcolor3:""
      })
    } else {
      this.setState({
        backcolor : "",
        backcolor2:"",
        backcolor3:"red"
      })
    }
  }

  render() {
    return (
      <Fragment>
        <View style={style.tabsWrapper}>
          <View style={style.tabsContainer}>
            <TouchableOpacity
              onPress={() => this.setIndex(0)}
              style={{backgroundColor: this.state.backcolor}}
            >
              <View style={style.tabItem}>
                <Text style={[style.tabText]} color="red">
                  Croco
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.setIndex(1)} 
            style={{backgroundColor: this.state.backcolor2}}>
              <View style={style.tabItem}>
                <Text style={[style.tabText]}>Gator</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.setIndex(2)}
            style={{backgroundColor: this.state.backcolor3}}>
              <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;

Answer 2

您可以conditionally add a class激活Tab，就像这样style={[ style.tabText, this.state.index===0 && style.activeTabText ]}

<View style={style.tabsContainer}>
    <TouchableOpacity onPress={()=> this.setIndex(0)}>
        <View style={style.tabItem}>
            <Text style={[ style.tabText, this.state.index===0 && style.activeTabText ]}>
                Croco
            </Text>
        </View>
    </TouchableOpacity>
    <TouchableOpacity onPress={()=> this.setIndex(1)}>
        <View style={style.tabItem}>
            <Text style={[ style.tabText, this.state.index===1 && style.activeTabText ]}>
                Gator
            </Text>
        </View>
    </TouchableOpacity>
    <TouchableOpacity onPress={()=> this.setIndex(2)}>
        <View style={style.tabItem}>
            <Text style={[ style.tabText, this.state.index===2 && style.activeTabText ]}>
                Style
            </Text>
        </View>
    </TouchableOpacity>
</View>

并添加样式，

const style = StyleSheet.create({

  ...

  activeTabText: {
    color: "red",
    backgroundColor: "#fff",
    borderRadius: 5
  }
});

Answer 3

尝试编写setIndex = (int) => {而不是setIndex(int) {，因为否则您的函数未绑定到组件。

如何向选项卡添加活动状态

3 个答案: