如何在反应原生态中显示交换机内的文本（YES/NO）

Question

我是反应原生的新手。在我的应用程序中，我使用开关并更改色调颜色来区分开和关，但我的实际要求是在开关内显示“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安装--save反应本地交换机

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;