Когда я пытаюсь изменить стиль просмотра, изменив состояние. он не ответит. Вы знаете почему?
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;
Не уверен, что это исправит ситуацию, но попробуйте изменить первую строку в ResponderMove на var style = {...this.state.style};
чтобы создать новый объект и дать понять, что новый вид на втором проходе рендеринга имеет другой стиль, чем первый. .
Не уверен на 100%, так как я не тестировал это, но у вас, кажется, есть два backgroundColors, один в вашем «стиле var», а другой в «this.state», и я думаю, вы их смешиваете. Вы должны решить, хотите ли вы, чтобы backgroundColor был сохранен здесь или там, и, соответственно, установите правильное значение в своем методе ResponderMove.
Ну вот!
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
}
Много проблем с переменными, посмотрите мой код выше, чтобы узнать, где вы ошиблись :) Кстати, этот тип вопросов лучше подходит для StackOverflow!
Самый полезный комментарий
Не уверен, что это исправит ситуацию, но попробуйте изменить первую строку в ResponderMove на
var style = {...this.state.style};
чтобы создать новый объект и дать понять, что новый вид на втором проходе рендеринга имеет другой стиль, чем первый. .