javascript - 样式未在组件内部更新

我的PanResponder有一个本机组件。我想拖动整个容器并指定所需的样式。但是我可以看到一个事实，即样式没有得到更新。该视图没有刷新。

即使我使用componentDidMount()方法并使用setTimeout更改背景颜色，样式似乎也不会重新渲染视图。

在另一堂课上，我使用PanResponder做同样的事情，并拖动以增加高度。它在那里工作。似乎是什么麻烦？

这是代码。

'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var Story = require('./Story');

var {
  View,
  StyleSheet,
  PanResponder
} = React;

// <Story data={data[0]} />
// {...this.panResponder.panHandlers}

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
var styles = {
    wrapper: { flex: 1 },
    container: { flex: 1, left: 0, width: width, height: height },
};

var StoryContainer = React.createClass({
    componentWillMount: function(){
        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
            onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
            onPanResponderGrant: this.handlePanResponderGrant,
            onPanResponderMove: this.handlePanResponderMove,
            onPanResponderRelease: this.handlePanResponderEnd,
            onPanResponderTerminate: this.handlePanResponderEnd,
        });
    },

    componentDidMount: function(){
        var that = this;
        setTimeout(function(){
            console.log('updating styles');
            styles.container.backgroundColor = '#000000';
            that.forceUpdate();
        }, 4000);
    },

    render: function(){
        var data = this.props.data;
        return (
            <View style={styles.container}>
                <Story data={data[0]} />
            </View>
        )
    },

    handleStartShouldSetPanResponder: function(evt: Object, gestureState: Object){
        return true;
    },

    handleMoveShouldSetPanResponder: function(evt: Object, gestureState: Object){
        return true;
    },

    handlePanResponderGrant: function(evt: Object, gestureState: Object){
        // return true;
    },

    handlePanResponderMove: function(evt: Object, gestureState: Object){
        console.log(gestureState.dx);
        styles.container.left = styles.container.left + gestureState.dx;
        this.forceUpdate();
    },

    handlePanResponderEnd: function(evt: Object, gestureState: Object){
        // end this sucker
    }
});

module.exports = StoryContainer;

最佳答案

您使用的React错误。


摆脱所有全局变量setTimeout和forceUpdate
了解道具和状态之间的区别
使用this.setState()更新您的状态，并使用this.state.X在您的render()函数中使用它。