Question

我是反应原生的新手。在我的应用程序中，我正在使用开关并更改色调颜色以区分ON和OFF，但我的实际要求是在开关内显示“YES”或“NO”文本，如下所示。

这是我的代码：

<Switch
                    onValueChange={this.change.bind(this)}
                    style={{marginBottom:10,width:90,marginRight:6,marginLeft:6}}
                    value={true}
                    thumbTintColor="#0000ff"
                    tintColor="#ff0000"
                    />

请给我建议解决这个问题，非常感谢。

Answer 1

最后我得到了开关内的开关.......

安装

npm install --save react-native-switch

    import { Switch } from 'react-native-switch';

<Switch
value={true}
onValueChange={(val) => console.log(val)}
disabled={false}
activeText={'On'}
inActiveText={'Off'}
backgroundActive={'green'}
backgroundInactive={'gray'}
circleActiveColor={'#30a566'}
circleInActiveColor={'#000000'}/>

参考此链接...... https://github.com/shahen94/react-native-switch

Answer 2

我会从这样的事情开始然后迭代和抛光，直到它满足要求并且看起来很好。这不是一个完整的解决方案，但应该给你一些想法。

    import React from 'react';
    import { LayoutAnimation, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

    const styles = StyleSheet.create({
      container: {
        width: 80,
        height: 30,
        backgroundColor: 'grey',
        flexDirection: 'row',
        overflow: 'visible',
        borderRadius: 15,
        shadowColor: 'black',
        shadowOpacity: 1.0,
        shadowOffset: {
          width: -2,
          height: 2,
        },
      },
      circle: {
        width: 34,
        height: 34,
        borderRadius: 17,
        backgroundColor: 'white',
        marginTop: -2,
        shadowColor: 'black',
        shadowOpacity: 1.0,
        shadowOffset: {
          width: 2,
          height: 2,
        },
      },
      activeContainer: {
        backgroundColor: 'blue',
        flexDirection: 'row-reverse',
      },
      label: {
        alignSelf: 'center',
        backgroundColor: 'transparent',
        paddingHorizontal: 6,
        fontWeight: 'bold',
      },
    });

    class LabeledSwitch extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: props.value,
        };
        this.toggle = this.toggle.bind(this);
      }
      componentWillReceiveProps(nextProps) {
        // update local state.value if props.value changes....
        if (nextProps.value !== this.state.value) {
          this.setState({ value: nextProps.value });
        }
      }
      toggle() {
        // define how we will use LayoutAnimation to give smooth transition between state change
        LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
        const newValue = !this.state.value;
        this.setState({
          value: newValue,
        });

        // fire function if exists
        if (typeof this.props.onValueChange === 'function') {
          this.props.onValueChange(newValue);
        }
      }
      render() {
        const { value } = this.state;

        return (
          <TouchableOpacity onPress={this.toggle}>
            <View style={[
              styles.container,
              value && styles.activeContainer]}
            >
              <View style={styles.circle} />
              <Text style={styles.label}>
                { value ? 'YES' : 'NO' }
              </Text>
            </View>
          </TouchableOpacity>
        );
      }
    }

    LabeledSwitch.propTypes = {
      onValueChange: React.PropTypes.func,
      value: React.PropTypes.bool,
    };

    LabeledSwitch.defaultProps = {
    };

    export default LabeledSwitch;

如何在react-native中的开关内显示文本（是/否）

2 个答案: