Wie ändere ich die Bild- und Textfarbe, wenn ich mit reaktiv-nativ klicke?

Question

Ich benutze TouchableHighlight, aber ich kann nur Hintergrundfarbe mit UnderlayColor ändern. Aber wie ändere ich andere Inhalte?

Answer 1

Sie können alles mit Styling ändern. Etwas wie:

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

Ich habe ein Beispielprojekt mit ein paar Tasten here und legte den Code unten aufgebaut. Hoffe das hilft!

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

Diese Antwort wird vorausgesetzt, Sie die Farbe nur, solange die Taste gedrückt wird sich ändern wollen:

Verwenden TouchableWithoutFeedback und definieren Sie Ihre eigene onPressIn und onPressOut Funktionen, um die Textfarbe zu ändern.

<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; 
    } 
}