Wenn ich versuche, den Ansichtsstil zu ändern, indem ich den Status ändere. es wird nicht reagieren. Hast du eine Ahnung warum?
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;
Ich bin mir nicht sicher, ob dies die Dinge behebt, aber versuchen Sie, die erste Zeile in ResponderMove in var style = {...this.state.style};
ändern, damit Sie ein neues Objekt erstellen und deutlich machen, dass die neue Ansicht im zweiten Renderdurchgang einen anderen Stil hat als der erste .
Nicht 100% sicher, da ich es nicht getestet habe, aber Sie scheinen zwei Hintergrundfarben zu haben, eine in Ihrem "var-Stil" und die andere in "this.state", und ich denke, Sie vermischen sie. Sie sollten entscheiden, ob Sie die backgroundColor hier oder dort speichern wollen, und in Ihrer ResponderMove-Methode jeweils den richtigen Wert einstellen.
Bitte schön!
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
}
Viele Probleme mit Variablen, sieh dir meinen Code oben an, um zu sehen, wo du einen Fehler gemacht hast :) Übrigens ist diese Art von Frage für StackOverflow besser geeignet!
Hilfreichster Kommentar
Ich bin mir nicht sicher, ob dies die Dinge behebt, aber versuchen Sie, die erste Zeile in ResponderMove in
var style = {...this.state.style};
ändern, damit Sie ein neues Objekt erstellen und deutlich machen, dass die neue Ansicht im zweiten Renderdurchgang einen anderen Stil hat als der erste .