React-native : 스 와이프 중에 행의 내용이나 스타일을 변경하는 방법은 무엇입니까?

Question

Google받은 편지함 (demo)과 비슷한 기능을 사용하고 싶을 때 항목을 스 와이프하면 아이콘의 배경색과 크기가 변경됩니다.

내 구현에는 Swipeable 구성 요소가 행으로 포함되어 있으며 스 와이프 위치를 기준으로 행의 내용이나 스타일 (예 : 오른쪽 창)을 변경하고 싶습니다. ListView를 다시 스 와이프하는 동안 다시 렌더링하려면 pos 상태를 추가했는데이 상태는 Swipeable의 onPanAnimatedValueRef 보조를 사용하여 설정했습니다.

문제는 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을 통해 데이터를 변경할 수 있습니다 (아마도 상태에 근거했다 및 그러므로 다시 쓰게을 강제하지만이 덜 효율적인 경로)