Question

我在一个活动中有5个正常运行的开关。但是问题在于所有这些互连都是相互关联的，即，如果打开一个开关，则所有开关都将打开。

如何使它们成为独立的开关，以使其不受其他开关动作的影响？

我的代码-

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

如何解决此错误？我试过叫它作为不起作用的不同开关！

Answer 1

您已将所有开关值链接到相同的状态变量。 colorTrueSwitchIsOn。并且所有onValueChange方法都更改相同的变量。您是否有特定原因想要这样做？因为这是问题。

每个开关的value和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}/>

如何在本机中有多个独立的交换机？

1 个答案: