Comment changer l'image et la couleur du texte lorsque vous cliquez à l'aide de réagir indigènes?

Je suis en utilisant TouchableHighlight, mais je peux changer seulement la couleur d'arrière-plan à l'aide de underlayColor. Mais comment faire pour changer d'autres contenus?

InformationsquelleAutor kyrilkin | 2015-12-04
  1. 9

    Vous pouvez modifier le tout en utilisant le style. Quelque chose comme:

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

    J'ai créé un exemple de projet avec un couple de boutons ici, et placé le code ci-dessous. Espérons que cette aide!

    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);
    • Le lien est mort
    • comment peut-il travailler dans la ListView. J'utilise le même code dans listView mais pas changé de couleurs.
    InformationsquelleAutor Nader Dabit
  2. 7

    Cette réponse, c'est en supposant que vous voulez changer la couleur, tandis que le bouton est enfoncé:

    Utilisation TouchableWithoutFeedback et de définir votre propre onPressIn et onPressOut de fonctions pour modifier la couleur du texte.

    <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;
}
}
    InformationsquelleAutor Eadz
  3. 5

    Avec TouchableHighlight vous pouvez le faire comme ceci

    state = { selected: false };
setSelected(selected: boolean) {
this.setState({ selected: selected });
}
textStyle() {
return this.state.selected ? styles.textSelected : styles.text;
}

    Puis dans la fonction rendu

    <TouchableHighlight
underlayColor={Theme.palette.accent}
onPress={() => onPress()}
onShowUnderlay={() => this.setSelected(true)}
onHideUnderlay={() => this.setSelected(false)}
>
<Text style={this.textStyle()}>{text}</Text>
</TouchableHighlight>
    • Comment mettre en œuvre ce pour plusieurs onglets, à un moment unique onglet doit être active onglets restants seraient inactifs et comment le configurer pour les images trop?
    InformationsquelleAutor box