シンプルなスクロールアニメーションを反応ネイティブで作業するには

Question

私は反応ネイティブで作業する簡単なスクロールアニメーションを手に入れようとしています。

私が達成しようとしているのは、コンポーネントがタップされた後、画面の右端からコンポーネントがスクロールすることです。

このクラスで何をしても、要素をタップするとエラーAttempted to assign to readonly propertyが表示されますが、理由がわかりません。

animateOut関数で発生することがわかる唯一の割り当ては、this.anim.offsetXですが、それはコンストラクタで明確に割り当てられているため、読み取り専用プロパティにすることはできません。

物事は私が試してみたが、助けていない：

1. は、国有財産のうち、アニメート値を取るので、animated.timingコールが直接国有財産を変異しようとしていません。

2. この値を変更したアニメーションが1つのみであるようにアニメーション呼び出しを簡略化します。

3. 例：the reactjs animation docsを慎重に読んで、私が何をしているかを見てください。

4. スタックオーバーフローに関する既存の質問を探します。 this questionが見つかりましたが、エラー状態が私のコードに当てはまらないようです。

私が間違っていることを誰かに教えてもらえますか？あなたはXとYの値を設定し、Animated.View

にそれを与える必要があり

export default class SquareBlock extends Component { 

    constructor(props) { 
     super(props); 
     this.anim = {}; 
     this.anim.offsetX = new Animated.Value(0); 

    } 

    animateOut() { 
     console.log("animating out"); 

     console.log("X offset:",this.anim.offsetX) 

     Animated.timing(
      this.anim.offsetX, 
      { toValue: 120, 
      duration: 500 
      } 
     ).start(); 


    } 


    render() { 

     let content = this.props.content || "Tappable"; 
     let offsetX; 

     offsetX = this.anim.offsetX; 

     return (
      <Animated.View > 
      <TouchableNativeFeedback onPress={() => this.animateOut() }> 
       <View style={ [styles.outerBox, { "left": offsetX } ] } > 

        <Text style={ styles.text }> { content }</Text> 

       </View> 
      </TouchableNativeFeedback> 
      </Animated.View> 
     ) 

    } 

} 

Answer 1

また、あなたが（アニメーションにスタイルを供給する必要が少なくともスタイルが使用するアニメーション小道具の名前です。 ）。

はこれを試してみてください。）（

はあなたがcomponentWillMountに開始したい位置を持っているあなたのAnimated.Viewで

componentWillMount() { 
     //important 
     this.position = new Animated.ValueXY({x: 30 , y: 0}); 
} 

を、あなたには言わ//スタイルとしてthis.position供給する必要があり、 styleはアニメーションを取る小道具の名前です。

<Animated.View style={this.position.getLayout()}> //very important 
    <TouchableNativeFeedback onPress={() => this.animateOut() }> 
       <View style={ [styles.outerBox, { "left": offsetX } ] } > 

        <Text style={ styles.text }> { content }</Text> 

       </View> 
    </TouchableNativeFeedback> 
</Animated.View> 

と

animateOut() {  
     this.position , 
     Animated.timing(this.position, { 
      toValue: { x: this.position + 20 , y: 0}, 
      duration: 250 
     }).start(); 
} 

これは正しく

を動作するはずです