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

Question

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

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

这是我的应用程序.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;

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

我在线测试它，所以你可以在反应原生沙盒上看到它。

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

Answer 1

您可以有条件地添加一个类以使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 2

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

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 3

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