प्रतिक्रिया-देशी का उपयोग करते समय छवि और टेक्स्ट रंग कैसे बदलें?

Question

मैं टच करने योग्य हाइलाइट का उपयोग कर रहा हूं, लेकिन मैं अंडरले रंग का उपयोग करके केवल पृष्ठभूमि रंग बदल सकता हूं। लेकिन अन्य सामग्री कैसे बदलें?

Answer 1

आप इसे स्टाइल का उपयोग करके सभी बदल सकते हैं। कुछ की तरह:

<TouchableHighlight style={{ backgroundColor: 'red', height: 60, flexDirection: 'row' }}> 
    <Text style={{ color: 'white' }}>Click Me</Text> 
<TouchableHighlight> 

मैं बटन here के एक जोड़े के साथ एक नमूना परियोजना की स्थापना की है, और नीचे दिए गए कोड रखा। उम्मीद है की यह मदद करेगा!

उपयोग TouchableWithoutFeedback और पाठ रंग बदलने के लिए अपने स्वयं के onPressIn और onPressOut कार्यों को परिभाषित:

https://rnplay.org/apps/k_6rtg

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight 
} = React; 

var colors = ['#ddd', '#efefef', 'red', '#666', 'rgba(0,0,0,.1)', '#ededed']; 
var backgroundcolors = ['green', 'black', 'orange', 'blue', 'purple', 'pink']; 

var SampleApp = React.createClass({ 

    getInitialState() { 
    return { 
     color: 'orange', 
     backgroundColor: 'rgba(0,0,0,.1)' 
    } 
    }, 

    _changeStyle() { 
    var color = colors[Math.floor(Math.random()*colors.length)]; 
    var backgroundColor = backgroundcolors[Math.floor(Math.random()*backgroundcolors.length)]; 
    this.setState({ 
     color: color, 
     backgroundColor: backgroundColor 
    }) 
    }, 

    render: function() { 
    return (
     <View style={styles.container}> 
     <TouchableHighlight 
     onPress={() => this._changeStyle() } 
     style={{ backgroundColor: this.state.backgroundColor, height: 60, flexDirection: 'row', alignItems:'center', justifyContent: 'center' }}> 
       <Text style={{ fontSize: 22, color: this.state.color }}>CHANGE COLOR</Text> 
     </TouchableHighlight> 

     <TouchableHighlight style={{ backgroundColor: 'red', height: 60, flexDirection: 'row', alignItems:'center', justifyContent: 'center' }}> 
      <Text style={{ color: 'white', fontSize:22 }} >Click Me</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop:60 
    } 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp); 

Answer 2

इस उत्तर आप रंग सिर्फ जबकि बटन उदास है बदलना चाहते हैं यह सोचते है।

<TouchableWithoutFeedback onPressIn={this.colorText} onPressOut={this.resetText}> 
    <Text style={[styles.textColored()]}>MyText</Text> 
</TouchableWithoutFeedback> 

colorText: function() { 
    this.setState({textColored: true}); 
}, 
resetText: function() { 
    this.setState({textColored: false}); 
}, 
textColored: function() { 
    if(this.state.textColored) { 
    return styles.textColored; 
    } else { 
    return styles.textNormal; 
    } 
}