Sto usando TouchableHighlight, ma posso cambiare solo il colore di sfondo usando underlayColor. Ma come cambiare altri contenuti?Come modificare il colore dell'immagine e del testo quando si fa clic utilizzando react-native?
5
A
risposta
4
È possibile modificare tutto utilizzando lo stile. Qualcosa di simile:
<TouchableHighlight style={{ backgroundColor: 'red', height: 60, flexDirection: 'row' }}>
<Text style={{ color: 'white' }}>Click Me</Text>
<TouchableHighlight>
Ho impostato un progetto di esempio con un paio di pulsanti here, e collocato il codice qui sotto. Spero che questo ti aiuti!
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);
4
Questa risposta è supponendo che si desidera cambiare il colore proprio mentre il pulsante è premuto:
Usa TouchableWithoutFeedback e definire funzioni onPressIn e onPressOut per modificare il colore del testo.
<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;
}
}
Problemi correlati
- 1. Cambiare il colore di un ancoraggio quando si fa clic
- 2. Modificare il bordo Colore del riquadro di testo
- 3. cambia colore di sfondo pulsante quando si fa clic su
- 4. Come cambiare il colore del titolo di UIButton quando si fa clic?
- 5. Android: cambia colore pulsante quando si fa clic su
- 6. ReactNative: come centrare il testo?
- 7. Come consumare e chiudere PopupWindow quando si fa clic all'esterno?
- 8. Come modificare il colore del testo/dei caratteri in reportlab.pdfgen
- 9. Come seleziono tutto il testo quando si fa clic su una vista Modifica testo?
- 10. Come modificare il colore del testo e il colore di riempimento
- 11. Come modificare il colore del testo e il colore della console in code :: blocks?
- 12. IE 8 sposta il testo del pulsante di input quando si fa clic su
- 13. TextView per inviare e-mail quando si fa clic su
- 14. L'evento click del controllo utente non funziona quando si fa clic sul testo all'interno del controllo?
- 15. Quando si fa clic sulla tastiera del tasto chiaro di uitextfield non scompare il testo
- 16. Come impostare l'icona stella preferita su ON quando si fa clic e OFF quando si fa nuovamente clic su Android
- 17. come modificare il colore di sfondo del campo di testo UISearchBar e il colore del testo in ios8
- 18. Tema AlertDialog: come modificare il colore del testo dell'articolo?
- 19. Selezione del testo in div (contenteditable) quando si fa doppio clic
- 20. Cambiare il colore del testo in Eclipse
- 21. Android: Come modificare il colore del testo di ProgressDialog?
- 22. Come modificare il colore del testo di IcsSpinner in ActionBarSherlock?
- 23. Cambia colore DIV quando si fa clic su un altro DIV
- 24. Android come rendere visibile l'evidenziazione quando si fa clic su?
- 25. Come modificare il colore del testo in diversi frammenti
- 26. Cambiare il colore di sfondo del layout lineare mentre si fa clic su
- 27. Selezione di tutto il testo nell'input di testo HTML quando si fa clic su
- 28. Dati di aggiornamento (JQuery) quando si fa clic sul pulsante
- 29. Come animare l'elemento in ListView quando si fa clic su?
- 30. Impossibile modificare il colore del testo attivo su TabLayout
Il collegamento è morto –
come funziona in ListView. Utilizzerò lo stesso codice in listView ma non i colori modificati in esso. –