标签: react-native-reanimated-v2

我正在尝试通过React Native使用createDrawerNavigator。 但是，我收到以下错误，我不知道如何解决。
import { createDrawerNavigator } from '@react-navigation/drawer';

错误：需要模块“node_modules\react-native-reanimated\src\Animated.js”，抛出异常：错误：Reanimated 2 未能创建工作集，也许您忘记添加 Reanimated 的 babel 插件？

在babel.config.js中，我尝试了下面的代码，但它不起作用：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
    ]
  };
};

这是我的组件：

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' …

获取任何元素在屏幕上的绝对位置的最可靠方法是什么？

我遇到的问题是，当使用我的方法添加上面的元素（父元素）时，我无法获取元素的绝对位置。

上下文：我需要获取元素在屏幕上的绝对位置，以检查跟随手指的元素（用重新动画制作的动画）是否与我无法从中获取绝对位置的元素相交。

我尝试过的方法：

event.target.measure

问题是我在“下拉框”上有一个滑动元素，它只会产生错误的位置。

ref.current.measure

这个有效但不可靠。它在 useEffect 中发射大约十次，并且只在正确位置产生一次。

还有其他可靠的事情我可以尝试吗？我不明白为什么很难获得屏幕上相对于父级的绝对位置。

TypeError: global.__reanimatedWorkletInit is not a function. (In 'global.__reanimatedWorkletInit(_f)', 'global.__reanimatedWorkletInit' is undefined)

我正在使用 React Native（不是 Expo），而且我什至没有重新下载。我下载了它，然后删除了它并重建了应用程序，现在它给了我这个错误。

我尝试过的事情：

• 删除node_modules并重新运行yarn install
• git reset HEAD~到之前的提交，我没有安装重新启动的软件包

我正在使用react-native-gesture-handler 和react-native-reanimated 包在react native 中对视图进行动画处理。点击时视图的比例应增加，背景颜色应在点击时更改为红色。当我在网络上启动应用程序时一切正常，但在 Android 上我没有得到任何反馈。我使用零食在我的设备上发送代码，并且在我的 Android 设备上运行，但是当我在笔记本电脑上使用 expo-start 运行该项目时，手势处理根本不起作用。任何帮助都感激不尽 。该项目由世博会管理。

我正在使用react-native-reanimated版本“~2.3.1”，react-native-gesture-handler版本“2.1.0”；

//我的APP.JS文件

import "react-native-gesture-handler";
import { StyleSheet, Text, View } from "react-native";
import Animated,{useAnimatedGestureHandler, useAnimatedStyle, useSharedValue} from "react-native-reanimated";
import {  TapGestureHandler } from "react-native-gesture-handler";

export default function App() {

  const pressed= useSharedValue(false);

  const gestureEvent= useAnimatedGestureHandler({
    onStart:()=>{
     
     pressed.value=true
    },
    onActive:(e)=>{
      pressed.value=true;
    },
    onEnd:()=>{
      pressed.value=false;
    }
  });

  const animationStyle=useAnimatedStyle(()=>{
    return {
      transform:[{scale:pressed.value?1.3:1}],
      backgroundColor:pressed.value?"red":"yellow"
    }
  })



  return (
    <View style={styles.container}>
      <TapGestureHandler onGestureEvent={gestureEvent}  >
        <Animated.View style={[styles.view,animationStyle]}></Animated.View>
      </TapGestureHandler>
    </View>
  );
}

const styles …

我的 React Native应用程序在回调中expo调用时崩溃，没有任何错误function()withTiming()

例子 ：

         
    const whenFinishFunction = () => {
        // do some thing
      };

    const [animationState, setAnimationState] = useState(false);
    
    progress.value = withTiming(1,{duration: 200},
          () => {
           whenFinishFunction();
           setAnimationState(false);
          }
        );

通过使用runOnJS解决

喜欢 ：

    progress.value = withTiming(1,{duration: 200},
          () => {
            runOnJS(whenFinishFunction)();
            runOnJS(setAnimationState)(false);
          }
        );

我一直在使用该库为我的 React Native 应用程序创建底部表单模式，但它似乎不适用于 Android，但在 iOS 上却可以。我使用了文档中建议的相同背景组件和句柄组件，并且包含的​​所有内容都是提供程序，并且 SafeAreaView 我的 package.json 包括

"@gorhom/bottom-sheet": "^3.6.5", 
"react-native-reanimated": "^2.0.0",

代码结构如下：

     <BottomSheetModal ref={reference_settings}
                            index      = {1}
                            enableOverDrag={true}
                            onChange   = {(index) => { if(index === 0) { reference_settings.current.dismiss(); } }}
                            snapPoints = {[-1, '50%', '70%']}
                            backdropComponent={Backdrop}
                            handleComponent  ={(props) => (<Belt {...props} />)}
                            style            ={styles.sheet}
                        >
                        <BottomSheetView style={[styles.content]}>
                            <View style={{ width, height: '100%', overflow: 'hidden', backgroundColor: scheme === 'dark' ? '#000' : '#FFF', paddingHorizontal: 10 }}>
                              // the functions inside
                            </View>
                       </BottomSheetView>
</BottomSheetModal>

我对 babel 使用了正确的配置来进行react-native-reanimated（包括插件），但它显示出来，然后我无法拖动关闭。

我正在尝试使用https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/entryAnimations

从文档来看，它看起来很简单，但是当我运行下面的代码时，什么也没有发生：

...
import Animated, { AnimatedLayout, FadeInRight } from "react-native-reanimated";

...
  return (
    <Animated.View
      entering={FadeInRight.delay(3000)}>
    ...
    </Animated.View>

在我的 package.json 中，我使用“react-native-reanimated”：“^2.3.0-beta.3”。

我缺少什么？有关于这个主题的推荐教程吗？

使用PanGestureHandlerfrom react-native-gesture-handlerwith react-native-reanimatedwithuseAnimatedGestureHandler会引发此错误。

期望onGestureHandlerEvent侦听器是一个函数，而不是得到一个object类型的值

这些是正在渲染的组件，

<View style={[styles.center]}>
  <Text style={{color: "#555", fontSize:16, marginTop: 120, marginBottom: 70, width: 250, margin: 'auto'}}>Works on the web but throws an error on iOS.</Text>

  <Animated.View style={[styles.box, styles.center, animatedStyle]}>
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Text style={{color: "#444", fontWeight:'bold', padding: 16,}}>Drag me around</Text>
    </PanGestureHandler>
  </Animated.View>
</View>;

这里的小吃，https://snack.expo.dev/4Mp-PfXPU

我想要的是

我试图通过在用户向下滚动时将背景从透明更改为灰色来对反应导航本机堆栈标题进行动画处理。我正在阅读文档，它建议使用 navigation.setOptions与屏幕信息进行交互。

import React from 'react';
import {
  useAnimatedScrollHandler,
  useSharedValue,
} from 'react-native-reanimated';

const MyScreen = ({ navigation }) => {
  const scrollY = useSharedValue(0);
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (e) => {
      scrollY.value = e.contentOffset.y;
    },
  });


  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerStyle: {
        backgroundColor: scrollY.value > 0 ? 'black' : 'transparent',
      },
      headerTransparent: scrollY.value === 0,
    });
  }, [ navigation, scrollY.value ]);
}