2017-06-21 43 views
1

我創建了一個可拖動的框。我可以拖動屏幕上的任何地方,但我得到這個錯誤,說「您試圖設置密鑰_value在一個對象上,意思是不可變的,並已被凍結」。誰能告訴我我做錯了什麼。反應本機「嘗試將值設置爲不可變的對象」

我的代碼:

import React, { Component } from 'react' 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    Button, 
    ScrollView, 
    Dimensions, 
    PanResponder, 
    Animated, 
    View 
} from 'react-native' 

import { StackNavigator } from 'react-navigation' 




export default class Home extends Component{ 

componentWillMount(){ 

    this.animatedValue = new Animated.ValueXY(); 

this.panResponder = PanResponder.create({ 

onStartShouldSetPanResponder: (evt, gestureState) => true, 
    onMoveShouldSetPanResponder: (evt, gestureState) => true, 
    onPanResponderGrant: (e, gestureState) => { 



     }, 

    onPanResponderMove:Animated.event([ 


null,{dx: this.animatedValue.x , dy:this.animatedValue.y} 

    ]), 
    onPanResponderRelease: (e, gestureState) => { 
     },  
}) 
} 

    render(){ 

    const animatedStyle = { 

     transform:this.animatedValue.getTranslateTransform() 
    } 

    return(

     <View style={styles.container}> 

     <Animated.View style={[styles.box ,animatedStyle]} {...this.panResponder.panHandlers}> 


     <Text>Home</Text> 


     </Animated.View> 
     </View> 
    ) 
    } 
} 


var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginLeft: 10, 
    marginRight: 10, 
    alignItems: 'stretch', 
    justifyContent: 'center', 
    }, 

    box:{ 

height:90, 
width:90, 
textAlign:'center' 



    } 
}); 
+0

得到了一個行號?我的猜測是它與'const animatedStyle'有關,因爲「不可變」意味着「不能改變」。 'this.animatedValue.getTranslateTransform()'可能不是常量。我不是100%確定的,但將'const'改爲'var'可能會訣竅,但我不確定爲什麼你將它設置爲const,以便我可能是錯的。 LMK如果可以的話,如果可以的話,我會把它作爲答案而不是評論。 –

+0

謝謝您期待我的問題先生,我嘗試過但仍然是同樣的錯誤。 :( –

+0

不知道這是否是問題,但你拼錯animatedStyle –

回答

0

嘗試了這一點。這將解決您的問題。 您需要初始化狀態對象中的animatedValue以使其工作。

constructor(props) { 
    super(props); 
    this.state = { 
    animatedValue: new Animated.ValueXY() 
    } 
} 

onPanResponderMove:Animated.event([ 
null,{dx: this.state.animatedValue.x , dy:this.state.animatedValue.y} 
]), 
相關問題