Jak zmienić kolor obrazu i tekstu podczas klikania metodą reagowania rodzimego?

Question

Używam TouchableHighlight, ale mogę zmienić tylko kolor tła za pomocą underlayColor. Ale jak zmienić inne treści?

Answer 1

Można zmienić to wszystko za pomocą stylizacji. Coś jak:

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

Wcześniej skonfigurować przykładowy projekt z kilkoma przyciskami here i umieszczony poniżej kod. Mam nadzieję że to pomoże!

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

Ta odpowiedź jest przy założeniu, że chcesz zmienić kolor tylko gdy przycisk jest wciśnięty:

Używaj TouchableWithoutFeedback i definiować własne funkcje onPressIn i onPressOut zmienić kolor tekstu.

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