风格不更新内部组件

问题描述：

我有一个与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;

快速评论：样式var未用StyleSheet.create（{...}）进行初始化。可能是解决方案吗？ – nicopasso

答

您正在使用React错误。

摆脱所有的全局变量，setTimeout，并forceUpdate
了解道具和状态
使用this.setState()之间的差异来更新您的状态，并this.state.X要利用它在你的render()功能。

风格不更新内部组件

相关推荐