Android 如何在react native中拥有多个独立的交换机？
我在一项活动中有5个开关工作正常。但问题是，所有开关都是相互连接的，即，如果一个开关打开，所有开关都会打开 如何使它们独立切换，而不受其他切换操作的影响 我的代码-Android 如何在react native中拥有多个独立的交换机？,android,react-native,Android,React Native,我在一项活动中有5个开关工作正常。但问题是，所有开关都是相互连接的，即，如果一个开关打开，所有开关都会打开 如何使它们独立切换，而不受其他切换操作的影响 我的代码- state = { colorTrueSwitchIsOn: true, colorFalseSwitchIsOn: false, }; class Notification extends Component { static navigationOptions = ({ navigat
state = {
colorTrueSwitchIsOn: true,
colorFalseSwitchIsOn: false,
};
class Notification extends Component {
static navigationOptions = ({
navigation
}) => ({
header: props => < Header
navigation = {
navigation
}
title = {
'NOTIFICATION SETTINGS'
}
toggleDrawer /
>
})
constructor(props) {
super(props);
this.state = {
SwitchOnValueHolder: false
};
}
ShowAlert = (value) => {
this.setState({
SwitchOnValueHolder: value
})
if (value == true) {
//Perform any task here which you want to execute on Switch ON event.
Toast.show('Switch is On');
}
else {
//Perform any task here which you want to execute on Switch OFF event.
Toast.show('Switch is On');
}
}
render() {
return ( <
View style = {
styles.container
} >
<
ScrollView >
<
View style = {
{
flex: 1,
flexDirection: 'row'
}
} >
<
View style = {
{
width: '25%',
height: 50,
}
} >
<
Switch onValueChange = {
(value) => this.setState({
colorTrueSwitchIsOn: value
})
}
onTintColor = "#FFE2C6"
thumbTintColor = "#FF952E"
tintColor = "#D7D0C9"
value = {
this.state.colorTrueSwitchIsOn
}
/>
<
/View>
<
/View>
<
View style = {
{
flex: 1,
flexDirection: 'row'
}
} >
<
View style = {
{
width: '25%',
height: 50,
}
} >
<
Switch onValueChange = {
(value) => this.setState({
colorTrueSwitchIsOn: value
})
}
onTintColor = "#FFE2C6"
thumbTintColor = "#FF952E"
tintColor = "#D7D0C9"
value = {
this.state.colorTrueSwitchIsOn
}
/>
<
/View>
<
/View>
<
View style = {
{
flex: 1,
flexDirection: 'row',
marginBottom: 20
}
} >
<
View style = {
{
width: '25%',
height: 50,
top: 10
}
} >
<
Switch onValueChange = {
(value) => this.setState({
colorTrueSwitchIsOn: value
})
}
onTintColor = "#FFE2C6"
thumbTintColor = "#FF952E"
tintColor = "#D7D0C9"
value = {
this.state.colorTrueSwitchIsOn
}
/>
<
/View>
<
/View>
<
View style = {
{
flex: 1,
flexDirection: 'row'
}
} >
<
View style = {
{
width: '25%',
height: 50,
}
} >
<
Switch onValueChange = {
(value) => this.setState({
colorTrueSwitchIsOn: value
})
}
onTintColor = "#FFE2C6"
thumbTintColor = "#FF952E"
tintColor = "#D7D0C9"
value = {
this.state.colorTrueSwitchIsOn
}
/>
<
/View>
<
/View>
<
View style = {
{
flex: 1,
flexDirection: 'row'
}
} >
<
View style = {
{
width: '25%',
height: 50,
}
} >
<
Switch onValueChange = {
(value) => this.setState({
colorTrueSwitchIsOn: value
})
}
onTintColor = "#FFE2C6"
thumbTintColor = "#FF952E"
tintColor = "#D7D0C9"
value = {
this.state.colorTrueSwitchIsOn
}
/>
<
/View>
<
/View>
<
/View>
<
/ScrollView>
<
/View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignContent: 'center',
backgroundColor: "#fff",
},
layout: {
marginTop: 15,
marginBottom: 5,
marginLeft: 15,
marginRight: 10,
}
})
export default Notification
状态={
真的，
颜色错误：错误，
};
类通知扩展了组件{
静态导航选项=({
航行
}) => ({
标题：道具=>
})
建造师（道具）{
超级（道具）；
此.state={
SwitchOnValueHolder:错误
};
}
ShowAlert=（值）=>{
这是我的国家({
SwitchOnValueHolder:值
})
如果（值==true）{
//在此处执行您希望在“打开开关”事件中执行的任何任务。
Toast.show（“开关打开”）；
}
否则{
//在此处执行您希望在关闭事件时执行的任何任务。
Toast.show（“开关打开”）；
}
}
render（）{
报税表（<
视图样式={
样式.容器
} >
<
滚动视图>
<
视图样式={
{
弹性：1，
flexDirection:“行”
}
} >
<
视图样式={
{
宽度：“25%”，
身高：50，
}
} >
<
打开值更改={
（值）=>this.setState({
colorTrueSwitchIsOn：值
})
}
onTintColor=“#FFE2C6”
thumbTintColor=“#FF952E”
tintColor=“#D7D0C9”
值={
this.state.colorTrueSwitchIsOn
}
/>
<
/查看>
<
/查看>
<
视图样式={
{
弹性：1，
flexDirection:“行”
}
} >
<
视图样式={
{
宽度：“25%”，
身高：50，
}
} >
<
打开值更改={
（值）=>this.setState({
colorTrueSwitchIsOn：值
})
}
onTintColor=“#FFE2C6”
thumbTintColor=“#FF952E”
tintColor=“#D7D0C9”
值={
this.state.colorTrueSwitchIsOn
}
/>
<
/查看>
<
/查看>
<
视图样式={
{
弹性：1，
flexDirection:'行'，
marginBottom:20
}
} >
<
视图样式={
{
宽度：“25%”，
身高：50，
前10名
}
} >
<
打开值更改={
（值）=>this.setState({
colorTrueSwitchIsOn：值
})
}
onTintColor=“#FFE2C6”
thumbTintColor=“#FF952E”
tintColor=“#D7D0C9”
值={
this.state.colorTrueSwitchIsOn
}
/>
<
/查看>
<
/查看>
<
视图样式={
{
弹性：1，
flexDirection:“行”
}
} >
<
视图样式={
{
宽度：“25%”，
身高：50，
}
} >
<
打开值更改={
（值）=>this.setState({
colorTrueSwitchIsOn：值
})
}
onTintColor=“#FFE2C6”
thumbTintColor=“#FF952E”
tintColor=“#D7D0C9”
值={
this.state.colorTrueSwitchIsOn
}
/>
<
/查看>
<
/查看>
<
视图样式={
{
弹性：1，
flexDirection:“行”
}
} >
<
视图样式={
{
宽度：“25%”，
身高：50，
}
} >
<
打开值更改={
（值）=>this.setState({
colorTrueSwitchIsOn：值
})
}
onTintColor=“#FFE2C6”
thumbTintColor=“#FF952E”
tintColor=“#D7D0C9”
值={
this.state.colorTrueSwitchIsOn
}
/>
<
/查看>
<
/查看>
<
/查看>
<
/滚动视图>
<
/查看>
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐内容：“中心”，
背景颜色：“fff”，
},
布局：{
玛金托普：15，
marginBottom:5，
marginLeft:15，
marginRight:10，
}
})
导出默认通知
我试着用不同的开关来调用它，但都不起作用 您已将所有开关值链接到同一状态变量；颜色开关。还有所有的onValueChange方法
this.state = {
switchVal1: true,
switchVal2: false
};
<Switch onValueChange = {(value) => this.setState({switchVal1: value})}
value = {this.state.switchVal1}/>
<Switch onValueChange = {(value) => this.setState({switchVal2: value})}
value = {this.state.switchVal2}/>