[study] 20240103 react-native-reanimated

react-native-reanimated

 

*worklet

-작은 조각의 javascript 조각

-뷰 속성을 업데이트 하거나, 이벤트에 반응할 때 UI Thread에서 바로 실행시킬 수 있는 JS조각

 

생성방법 : 함수 상단에 worklet이라는 string 추가

예)

const funcA=()=>{

"worklet"

...

}

 

*SharedValues

-Js Thread와 Main Thread 모두에서 읽기 또는 수정이 가능 한 값

Main Thread에서는 값이 변경됨을 바로 감지할 수 있어 읽기에 특화됨

-useAnimatedScrollHandler hook

-setValue directly

예)

const scrollOffset = useAnimatedScrollHandler({

  onScroll:(event)=>{     //스크롤 높이 구하기

scrollOffset.value = event.contentOffset.y

}

})

 

예)

const animVal = useSharedValue(0)

...

return(

   <Button

     onPress={()=>{animVal.value = Math.random()}}      //실제 값으로 변경

   />

)