React-native: 보기: 스타일이 setState로 업데이트되지 않음

이것이 문제를 해결할지 확실하지 않지만 responderMove의 첫 번째 줄을 var style = {...this.state.style}; 하여 새 개체를 만들고 두 번째 렌더 패스의 새 View가 첫 번째 것과 다른 스타일임을 분명히 하십시오. .

내가 테스트하지 않았기 때문에 100% 확신할 수는 없지만 "var 스타일"에 하나와 "this.state"에 하나의 backgroundColors가 있는 것 같으며 그것들을 섞고 있다고 생각합니다. 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에 더 적합합니다!