React-native：スワイプ中に行のコンテンツやスタイルを変更する方法は？

Question

Googleの受信トレイ（demo）と同様の機能を使用したい場合、アイテムをスワイプすると背景色とアイコンのサイズが変更されます。

ListViewのSwipeableコンポーネントが行として表示され、スワイプ位置に基づいて行のコンテンツやスタイルを右ペインなどで変更したいとします。 スワイプしている間にListViewを再レンダリングするために、のonPanAnimatedValueRef小道具を使用して設定したpos状態を追加しました。

ListViewは再レンダリングされず、何も変更されないという問題があります。

<ListView 
    ... 
    renderRow={(data) => (
       <Swipeable rightContent={ 
         <View><Text>{this.state.pos}</Text></View> 
        } 
        ... 
        onPanAnimatedValueRef={(pan) => { 
         pan.addListener(val => { 
          this.setState({ 
           pos: val.x 
          }); 
        }}> 
        {data} 
       </Swipeable> 
    )} 
/> 

これに問題がありますか？

Answer 1

自分のコンポーネントにSwipeableをラップし、その状態とアニメーションロジックを保持します。データが変更されておらず、行だけであるため、すべてを再レンダリングするのはListViewの責任ではありません。

また、あなたはListViewのデータ・ソースにsetStateを介してデータを変更することができます（おそらく状態に基づいていたので、再レンダリングを強制するが、これはあまり効率的なパスである）