2016-11-29 26 views
9

में स्विच के अंदर टेक्स्ट (हाँ/नहीं) कैसे दिखाएं मैं प्रतिक्रिया-मूल के लिए नया हूं। मेरे ऐप में, मैं एक स्विच का उपयोग कर रहा हूं और टिन रंग को चालू और बंद करने के लिए बदल रहा हूं, लेकिन मेरी वास्तविक आवश्यकता नीचे की तरह स्विच के अंदर "हाँ" या "नहीं" टेक्स्ट दिखाना है।प्रतिक्रिया-मूल

enter image description here

यहाँ मेरी कोड है:

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

मुझे इस मुद्दे को हल करने के सुझाव दे कृपया, किसी भी मदद की बहुत सराहना।

+6

स्विच के आईओएस और एंड्रॉइड कार्यान्वयन में लेबल नहीं हैं; हालांकि आप अपना खुद का निर्माण कर सकते हैं, या कुछ ऐसा उपयोग कर सकते हैं: https://github.com/Recr0ns/react-native-material-switch – peterp

उत्तर

4

अंत में मैं पर स्विच अंदर उतर गया .......

स्थापित

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

1

मैं इस तरह से कुछ शुरू करूंगा और तब इसे फिर से और पॉलिश करूँगा जब तक कि यह आवश्यकताओं को पूरा न करे और अच्छा लगे। यह एक पूर्ण समाधान नहीं है लेकिन आपको कुछ विचार देना चाहिए।

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; 

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^