标签: react-native-reanimated

我们已经使用 React Native PanResponder 开发了一个 swiper（在有人评论之前） - 我们不能在这里使用任何其他 swiper 库。在我们开发的滑动器中，当用户结束滑动（意味着释放平移）时，我们面临一个问题，启动弹簧动画时会出现滞后。

因此，为了解决这个问题，我们正在尝试从React Native Animated API迁移到Reanimated Libary，这可以解决用户面临的延迟问题。

但是，在使用React Native Gesture Handler (PanGestureHandler) 和 Reanimated Library 进行开发时，我们无法检测手势处理程序中的滑动方向。

我添加了用于检测 PanResponder 中滑动方向的代码部分

onPanMoving = (evt, {dx}) => {
   this.draggedEnd = dx < -this.swipeThreshold; //You are moving towards right screen
   this.draggedStart = dx > this.swipeThreshold; //You are moving towards left screen
}

如您所见，在 PanResponder 中检测平移移动时的方向非常容易。

手势处理程序的问题来了，

当手势状态处于活动状态时，我无法检测到滑动

我已经在手势处理程序中搜索了问题，并发现了这个。

该问题中建议了两种解决方法

1. 第一个是由Sonaye开发的，它有两个处理程序，并在onHandlerStateChange中检测两个处理程序的滑动方向，这在使用 reanimated 时没有帮助，因为它仅在处理程序状态更改时设置滑动方向。
2. 第二个是Satya提出的，它实际上在 State …

我用Animatedfrom react-nativewith创建了一个简单的动画react-native-svg。

这工作做得很好，

但是现在我改用了，react-native-reanimated因为我在他们的网站上读到，reanimated 比Animatedfrom react-native.

但是在这里我遇到了一个问题，那就是我找不到addListener监听值变化的函数。

代码Animated来自react-native：

const circleRadius = new Animated.value(100);

circleRadius.addListener( circleRadius => {
       circleSVG.current.setNativeProps({ cx: circleRadius.value.toString() });
});

如何addListener在 react-native-reanimated.

我正在学习 React Native Reanimated 版本 2，但在创建调用'worklet'.

我在使用npx react-native init myApp.
我已遵循所有安装说明，如下所示。

• 配置babel.config.js：

    module.exports = {
      presets: ['module:metro-react-native-babel-preset'],
      plugins: [
        'react-native-reanimated/plugin'
      ]
    };

• 启用Hermes并将其设置为 true。
• 配置MainApplication.java文件。
• 清理构建。
• 使用重置缓存yarn start --reset-cache。

我尝试制作一个简单的Worklet函数，如下所示：

    import React from 'react';
    import { View, Button } from 'react-native';

    const App = () => {

      const someWorklet = () => {
        'worklet';
        console.log('this run on UI thread');
      };

      return (
        <View >
          <Button …

我有一个使用reanimated-bottom-sheet包创建的底部工作表，如下所示

<BottomSheet
                ref={this.bottomSheetRef}
                snapPoints={[0, 270]}
                renderContent={() => <TextEditor/>}
                renderHeader={() => <View style={{ height: 70, backgroundColor: 'red' }}><Text>HEADER</Text></View>}
                enabledBottomClamp={true}
                callbackNode={fall}
                enabledInnerScrolling={false}
            />

我可以使用this.bottomSheetRef.current.snapTo(1)/打开/关闭底部的床单this.bottomSheetRef.current.snapTo(0)

但是当向下滑动正文/标题时，工作表不会关闭。

滚动列表时对视图高度进行动画处理非常缓慢且不稳定，对于 IOS 来说效果很好，但对于 Android 来说就不行：

import * as React from "react";
import { StyleSheet, Text } from "react-native";
import Animated from "react-native-reanimated";
const { Value, View, ScrollView, interpolate, Extrapolate } = Animated;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black"
  },
  listView: {
    flex: 1
  }
});

const IMAGE_MIN_HEIGHT = 300;

export default () => {
  const animation = new Value(0);

  const height = interpolate(animation, {
    inputRange: [0, 125],
    outputRange: [IMAGE_MIN_HEIGHT, 125],
    extrapolate: Extrapolate.CLAMP
  });

  return (
    <View …

我正在学习 reanimated，因为它在 UI 线程上工作，并且我想实现旋转动画。以度数旋转（如 45 度）不起作用并提示错误。那么如何在react-native-reanimation v1(version 1)中实现旋转动画呢？

从9.6.0升级react-native-redash到15.11.1后，我再也找不到了useValues。它被删除了吗？是否有一种新的首选方式来获取动画值？

我尝试使用 Animated.interpolate 但出现了一个我从未遇到过的奇怪错误。怎么解决呢？谢谢

我试图根据来自 reanimated 2 useAnimatedScrollHandler的滚动事件隐藏和显示标题，并且我需要使用diffClamp，因此每当用户向上滚动时，标题的显示时间应少于整个滚动事件contentOffset.y值，但问题是 diffClamp 是我认为来自reanimated v1 的，我需要使用 useAnimatedStyle 钩子才能在reanimated v2中对样式进行动画处理，最后它给出了一个错误。

有人可以帮忙吗？

有一些手势处理程序可以在浏览器中正常工作，但我在 iOS 上的 useAnimatedGestureHandler 挂钩的 onEnd 回调中收到此错误。

这是与我尝试添加的手势相关的所有代码

    const headerHeight = useSharedValue(176)

    const outerStyle = useAnimatedStyle(() => ({
        minHeight: 176,
        maxHeight: 416,
        height: headerHeight.value,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        position: 'relative',
        overflow: 'visible',
        zIndex: 502,
    }))

    const innerStyle = useAnimatedStyle(() => ({
        overflow: 'hidden',
        height: headerHeight.value,
        minHeight: 176,
        maxHeight: 416,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
    }))

    
    const resizeHeaderHeight = useAnimatedGestureHandler({
        onStart: () => {},
        onActive: (event) => {
            headerHeight.value = event.absoluteY
        },
        onEnd: () => {
            if(headerHeight.value < 305) {
                headerHeight.value  = …