标签: react-native-reanimated

我们遇到了一个问题，即我们的 React Native Android 应用程序由于内存泄漏而在某些设备上崩溃。虽然它在大多数设备上都能完美运行，但大约 25% 的用户报告了此崩溃。该问题已通过 Crashlytics 进行跟踪，并使用 LeakCanary 进行进一步调查，发现在屏幕（底部选项卡或堆栈导航）之间导航时会发生内存泄漏。

演示问题的存储库 Github 链接

下面是导航结构：

// main navigation\n<NavigationContainer>\n  <Stack.Navigator>\n    <Stack.Screen name="Auth" component={Auth} />\n    <Stack.Screen name="App" component={Drawer} />\n  </Stack.Navigator>\n</NavigationContainer>\n\n// drawer\n<Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>\n    <Drawer.Screen name="Main" component={BottomTabs} />\n</Drawer.Navigator>\n\n\n// Bottom Tabs\n<BottomTab.Navigator>\n  <BottomTab.Screen name="Tab1" component={Stack1} />\n  <BottomTab.Screen name="Tab2" component={Stack2} />\n  <BottomTab.Screen name="Tab3" component={Stack3} />\n  <BottomTab.Screen name="Tab4" component={Stack4} />\n</BottomTab.Navigator>\n\n// Stack 1 \n<Stack.Navigator>\n  <Stack.Screen name="Main" component={Screen} />\n  <Stack.Screen name="Screen2" component={Screen2} />\n  <Stack.Screen name="Screen3" component={Screen3} />\n  <Stack.Screen name="Screen4" component={Screen4} />\n  <Stack.Screen name="Screen5" …

我无法解决此问题，并浏览了以下文档 https://www.npmjs.com/package/react-native-tab-view

此外，我没有找到任何有关此问题的文件。我使用了上面链接中提到的相同示例代码。

import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
 
const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
 
const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
 
const initialLayout = { width: Dimensions.get('window').width };
 
export default function TabViewExample() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { …

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-reanimated尝试运行我的应用程序后安装在我的项目中时，它显示以下错误：

Cause: executing external native build for cmake /Users/MyPC/React-Native/Citi-App-Old-version/node_modules/react-native-reanimated/android/CMakeLists.txt

使用版本：

"react": "16.13.1",
"react-native": "0.63.0",
"react-native-reanimated": "^2.8.0",

你能帮我解决这个错误吗？

我正在开发一个关于 React Native 的项目，试图创建抽屉导航

• 我安装了导航抽屉、手势处理程序和重新启动的库

• 当我运行时，我收到错误第一个错误：

  错误错误：无法初始化react-native-reanimated库，请确保您按照此处的安装步骤操作： https: //docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

  1. 确保 reanimated 的 babel 插件安装在 babel.config.js 中（你应该在那里列出“react-native-reanimated/plugin” - 另请参阅上面的链接了解详细信息）
  2. 确保在更新配置后重置构建缓存，运行：yarn start --reset-cache，js引擎：hermes

所以我根据这个错误中的建议，在 babel.config.js 中添加了plugins:['react-native-reanimated/plugin'，并从 npm start ----reset 缓存开始，这给了我另一个错误：

第二个错误

error: index.js: Unknown option: .Plugins. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

这是我的 package.json

{
  "name": "Train",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.1",
    "react": "18.1.0", …

我的React Native应用程序在更新目标Sdk版本和compileSdkVersion 31后崩溃。它是工作版本30。Google Play强迫我们进行此更新。该应用程序在 Android 12 版本设备上崩溃。它适用于 Android 10 或 11。

我的 package.json 文件：

{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@notifee/react-native": "^0.12.2",
    "@react-native-community/async-storage": "^1.9.0",
    "@react-native-community/checkbox": "^0.5.7",
    "@react-native-community/datetimepicker": "^3.0.3",
    "@react-native-community/masked-view": "^0.1.9",
    "@react-native-community/netinfo": "^9.3.6",
    "@react-native-community/picker": "^1.5.1",
    "@react-native-community/progress-bar-android": "^1.0.3",
    "@react-native-community/progress-view": "^1.2.1",
    "@react-native-community/push-notification-ios": "^1.4.1",
    "@react-native-firebase/app": "^8.4.1",
    "@react-native-firebase/messaging": "7.8.4",
    "axios": "^0.21.1",
    "date-fns": "^2.28.0",
    "moment": "^2.24.0",
    "react": "16.13.1",
    "react-native": …

我想复制长按来录制并向左滑动来取消whatsapp/viber Messenger。

import React, {useRef, useState} from 'react';
import {
  Dimensions,
  TextInput,
  TouchableWithoutFeedback,
  View,
  PanResponder,
  Animated as NativeAnimated,
} from 'react-native';
import Animated, {Easing} from 'react-native-reanimated';
import styled from 'styled-components';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const {Value, timing} = Animated;

let isMoving = false;

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

const RecordButton = ({onPress, onPressIn, onPressOut}) => (
  <RecordButton.Container
    accessibilityLabel="send message"
    accessibilityRole="button"
    accessibilityHint="tap to send message">
    <TouchableWithoutFeedback
      delayPressOut={900}
      pressRetentionOffset={300}
      onPress={onPress}
      onPressIn={onPressIn}
      onPressOut={onPressOut}>
      <RecordButton.Icon />
    </TouchableWithoutFeedback>
  </RecordButton.Container>
);

RecordButton.Container = …

我正在制作新项目，但无法运行 Android 模拟器并出现此错误。

它位于“node_modules\react-native-reanimated\src\index.ts”，这只是其中的代码：

// tree-shaken side effects
import './reanimated2/js-reanimated/global';

// @ts-ignore backward compatibility with treeshaking
export * from './reanimated1';
export * from './reanimated2';
export * as default from './Animated';

我不知道该怎么办，请帮忙。先感谢您！

我的 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 重新启动文档，我有以下代码：

import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

function WobbleExample(props) {
  const rotation = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ rotateZ: `${rotation.value}deg` }],
    };
  });

  return (
    <>
      <Animated.View style={[styles.box, animatedStyle]} />
      <Button
        title="wobble"
        onPress={() => {
          rotation.value = withRepeat(withTiming(10), 6, true)

        }}
      />
    </>
  );
}

但我在我的 Metro 控制台中看到这个，应用程序崩溃了

Error: Reading from `_value` directly is only possible on the UI runtime

This error is located at:
    in AnimatedComponent (at …