Question

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

即使我使用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;

Answer 1

您正在使用React错误。

摆脱所有全局变量，setTimeout和forceUpdate
了解道具和州之间的区别
使用this.setState()更新您的州，this.state.X使用render()功能。

样式未在Component内更新

1 个答案: