風格不更新內部組件

我有一個與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;

來源

2015-04-30 amit

快速評論：樣式var未用StyleSheet.create（{...}）進行初始化。可能是解決方案嗎？ – nicopasso

您正在使用React錯誤。

擺脫所有的全局變量，setTimeout，並forceUpdate
瞭解道具和狀態
使用this.setState()之間的差異來更新您的狀態，並this.state.X要利用它在你的render()功能。

來源

2015-05-02 23:07:08 Tobia

風格不更新內部組件

回答

相關問題