样式未在组件内部更新

Question

我有一个带有 PanResponder 的 react-native 组件。我想拖动整个容器并指定所需的样式。但是我可以看到样式没有更新的事实；视图没有得到刷新。

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

在另一个 class 上，我正在对 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;

Answer 1

你用错了 React。

去掉所有全局变量，setTimeout，forceUpdate
理解 props 和 state 的区别
使用 this.setState() 更新您的状态，并 this.state.X 在您的 render() 函数中使用它。

样式未在组件内部更新

Styles not updating inside Component

javascript

reactjs

react-native