Làm thế nào để hiển thị văn bản (CÓ/KHÔNG) bên trong một công tắc trong phản ứng bản địa

Question

Tôi mới để phản ứng bản địa. Trong ứng dụng của tôi, tôi đang sử dụng công tắc và thay đổi màu sắc để phân biệt BẬT và TẮT, nhưng yêu cầu thực tế của tôi là hiển thị văn bản "CÓ" hoặc "KHÔNG" bên trong nút chuyển như dưới đây.

Đây là Mã của tôi:

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

Xin vui lòng cho tôi gợi ý để giải quyết vấn đề này, Bất kỳ giúp nhiều đánh giá cao.

Answer 1

Cuối cùng tôi đã On tắt bên trong công tắc .......

cài đặt

NPM cài đặt --save phản ứng bản địa-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'}/> 

Tham khảo này liên kết ... https://github.com/shahen94/react-native-switch

Answer 2

Tôi sẽ bắt đầu với một cái gì đó như thế này và sau đó lặp lại và đánh bóng cho đến khi nó đáp ứng các yêu cầu và có vẻ tốt. Đây không phải là một giải pháp hoàn chỉnh nhưng nên cung cấp cho bạn một số ý tưởng.

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;