Cuando intento cambiar el estilo de Vista cambiando el estado. no responderá. ¿Tienes idea de por qué?
var React = require('react-native');
var { View, Text} = React;
var TouchIt = React.createClass({
getInitialState() {
return {
style: style
}
},
shouldSetResponder() {
return true;
},
shouldSetMoveResponder() {
return true;
},
responderGrant() {
console.log('finger in');
},
responderMove() {
var style = this.state.style;
style.backgroundColor = this.getRandomColor();
this.setState({backgroundColor: backgroundColor});
},
responderRelease() {
console.log('finger out');
},
getRandomColor() {
var randomColor = '#'+Math.random().toString(16).substr(-6);
return randomColor;
},
render() {
return (
<View style={this.state.style}
onStartShouldSetResponder={this.shouldSetResponder}
onMoveShouldSetResponder={this.shouldSetMoveResponder}
onResponderGrant={this.responderGrant}
onResponderMove={this.responderMove}
onResponderRelease={this.responderRelease}
>
<Text>{this.style.backgroundColor}</Text>
</View>
);
}
});
var style = {
backgroundColor: 'rgb(11, 135, 91)',
flex: 1
}
module.exports = TouchIt;
No estoy seguro de si esto solucionará las cosas, pero intente cambiar la primera línea en responder Mover a var style = {...this.state.style};
para que cree un nuevo objeto y deje en claro que la nueva Vista en el segundo pase de renderizado tiene un estilo diferente al primero .
No estoy 100% seguro porque no lo he probado, pero parece que tienes dos colores de fondo, uno en tu "estilo var" y el otro en "this.state" y creo que los estás mezclando. Debe decidir si desea que backgroundColor se guarde aquí o allí, y establecer respectivamente el valor correcto en su método respondedorMove.
¡Aqui tienes!
var React = require('react-native');
var {
AppRegistry,
Image,
ScrollView,
StyleSheet,
Text,
View,
} = React;
var ExampleApp = React.createClass({
getInitialState() {
return {
style: style
}
},
shouldSetResponder() {
return true;
},
shouldSetMoveResponder() {
return true;
},
responderGrant() {
console.log('finger in');
},
responderMove() {
var backgroundColor = this.getRandomColor();
this.setState({style: {backgroundColor}});
},
responderRelease() {
console.log('finger out');
},
getRandomColor() {
var randomColor = '#'+Math.random().toString(16).substr(-6);
return randomColor;
},
render() {
return (
<View style={[{flex: 1}, this.state.style]}
onStartShouldSetResponder={this.shouldSetResponder}
onMoveShouldSetResponder={this.shouldSetMoveResponder}
onResponderGrant={this.responderGrant}
onResponderMove={this.responderMove}
onResponderRelease={this.responderRelease}
>
<Text>{this.state.style.backgroundColor}</Text>
</View>
);
}
});
var style = {
backgroundColor: 'rgb(11, 135, 91)',
flex: 1
}
Muchos problemas con las variables, consulte mi código anterior para ver dónde se equivocó :) Por cierto, ¡este tipo de pregunta es más adecuada para StackOverflow!
Comentario más útil
No estoy seguro de si esto solucionará las cosas, pero intente cambiar la primera línea en responder Mover a
var style = {...this.state.style};
para que cree un nuevo objeto y deje en claro que la nueva Vista en el segundo pase de renderizado tiene un estilo diferente al primero .