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

我是个新来的本地人。在我的应用程序中，我使用一个开关并改变色调以区分开和关，但我的实际要求是在开关内显示“是”或“否”文本，如下所示

这是我的密码：

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

---

请给我一些建议来解决这个问题，任何帮助都将不胜感激。

我将从类似的内容开始，然后反复修改，直到它满足要求并看起来不错。这不是一个完整的解决方案，但应该给你一些想法

    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”导入React；
从“react native”导入{LayoutImation、样式表、文本、TouchableOpacity、视图}；
const styles=StyleSheet.create({
容器：{
宽度：80，
身高：30，
背景颜色：“灰色”，
flexDirection:'行'，
溢出：“可见”，
边界半径：15，
阴影颜色：“黑色”，
阴影不透明度：1.0，
阴影偏移：{
宽度：-2，
身高：2，
},
},
圆圈：{
宽度：34，
身高：34，
边界半径：17，
背景颜色：“白色”，
马金托普：-2，
阴影颜色：“黑色”，
阴影不透明度：1.0，
阴影偏移：{
宽度：2，
身高：2，
},
},
activeContainer：{
背景颜色：“蓝色”，
flexDirection:“行反转”，
},
标签：{
对齐自我：“中心”，
背景色：“透明”，
水平方向：6，
fontWeight:'粗体'，
},
});
类LabeledSwitch扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
价值：道具价值，
};
this.toggle=this.toggle.bind（this）；
}
组件将接收道具（下一步）{
//如果props.value更改，则更新local state.value。。。。
if（nextrops.value！==this.state.value）{
this.setState（{value:nextrops.value}）；
}
}
切换（）{
//定义如何使用LayoutImation在状态更改之间进行平滑转换
LayoutImation.configureNext（LayoutImation.Presets.spring）；
const newValue=！this.state.value；
这是我的国家({
value:newValue，
});
//消防功能（如果存在）
if（typeof this.props.onValueChange==='function'）{
this.props.onValueChange（newValue）；
}
}
render（）{
const{value}=this.state；
返回(
{值？'YES'：'NO'}
);
}
}
LabeledSwitch.propTypes={
onValueChange:React.PropTypes.func，
值：React.PropTypes.bool，
};
LabeledSwitch.defaultProps={
};
导出默认标签开关；

我终于打开了内部开关

安装

npm安装--保存本机交换机

    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'}/>

从'react native Switch'导入{Switch}；
console.log（val）}
禁用={false}
activeText={'On'}
不活动文本={'Off'}
backgroundActive={'green'}
backgroundInactive={'gray'}
circleActiveColor={'#30a566'}
circleInActiveColor={'#000000'}/>

请参阅此链接。。。

---

Switch的iOS和Android实现没有标签；但是，您可以创建自己的，或者使用类似以下内容：

react-native-switch-selector

也很棒。