React Native Swipe 删除动画答案

【问题标题】：React Nativ Swipe to delete AnimationReact Native Swipe 删除动画
【发布时间】：2023-01-20 16:29:11
【问题描述】：

我尝试使用 Animation Reanimated 2 构建一个具有 React Native Swipe 删除功能的 React Native 和 Expo 应用程序，我正在按照一些教程进行操作，但我遇到了一些错误并且 Animation swip 无法正常工作。我不确定 React Native 上的组件动画效果如何，如果我写的逻辑错误请告诉我

这是显示的错误 [react-native-gesture-handler] 好像您正在使用带有手势组件的旧 API，请查看新的手势系统！

import Rect,{ useState }  from 'react';
import {View, Text,FlatList, StyleSheet} from 'react-native';
import {PanGestureHandler, PanGestureHandlerGestureEvent} from 'react-native-gesture-handler';
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';


const RequestsBody =() => {
    const [data, setData] = useState([
       {name:'Ha', key:'1' , activities: '5', zone: 'out-of-zone Check-in'},
       {name:'Je', key:'2' , activities: '2', zone: 'out-of-zone Check-in'},
       {name:'Om', key:'3' , activities: '5', zone: 'out-of-zone Check-in'},  
   ])

    const translatX = useSharedValue(0)

      const panGesture = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
          onActive: (event) => {
            translatX.value  = event.translationX
          },
          onEnd: () => {
              translatX.value = withTiming(0);
          },
      })

      const rStyle = useAnimatedStyle(()=>({
          transform:[{
              translateX: translatX.value
          }]
      }))
 
  return (


      <View>
          <FlatList
             data={data}
             renderItem = {({item})=>(
                 <View style={{ width: 360, top:80}}>
                     <PanGestureHandler onGestureEvent={panGesture}>
                    <Animated.View style={[styles.container,rStyle]} >
                     <Text style={{ fontWeight:'bold'}} >{item.name}</Text>
                     <Text style={{ position:"absolute",top:25 ,right:8,color:"#3781C4"}}>
                     {item.activities} activities</Text>  
                     <Text style={{ top:5 ,color:"#8D8D8D"}}>  {item.zone}</Text> 
                    </Animated.View>
                   </PanGestureHandler>
                 </View>    
                   )}
           />
       
      </View>
  )}



export default RequestsBody;
 

const styles = StyleSheet.create({
    container:{
          padding: 16,
          marginTop:4,
          backgroundColor: "#f5f3f3",
          borderRadius: 5,
          shadowColor: "#000",
          shadowOpacity: 0.06,
          shadowOffset: {
          width: 5,
          height: 5,
          },
        },
})

我想我几乎没有语法错误，但不确定我将如何更正它们

【问题讨论】：

标签： react-native

【解决方案1】：

react-native-gesture-handler 的版本不是最新版本，与react-native-reanimated 不兼容。更新 react-native-gesture-handler 的版本，此外，我看到您正在使用 withTiming 函数，它不是一个有效的函数。它应该是withTiming(translatX, {duration: 200}) 这样它会为 200 毫秒的值设置动画。

【讨论】：