javascript - 样式未在组件内更新

Question

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

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

在另一个类上，我使用 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。

1. 删除所有全局变量、setTimeout 和 forceUpdate
2. 了解 props 和 state 之间的区别
3. 使用 this.setState() 更新您的状态，并使用 this.state.X 在 render() 中使用它功能。