使用react-native-reanimated反应导航崩溃

Question

将

react-native-reanimated

库集成到我的 React Native 项目中后，我遇到了导航设置问题。在集成

react-native-reanimated

之前，我的导航系统运行良好，并且我能够使用定义的类型进行导航，没有任何问题。然而，在我的项目中添加

react-native-reanimated

后，我遇到了一个严重的问题。

与导航堆栈标题的后退按钮交互或在底部选项卡导航器中切换选项卡时会出现此问题。应用程序没有提供任何错误反馈，而是突然崩溃。

我使用 Flipper 进行调试，它向我指出了一个标记为“EXC_BAD_ACCESS”的错误。该错误似乎与内存访问问题有关。有趣的是，我只是在添加

react-native-reanimated

包后才遇到这个问题。当我删除这个包时，问题就消失了。

{
  "name": "DocvivoMobil",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/checkbox": "^0.5.16",
    "@react-native-community/datetimepicker": "^7.4.2",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "babel-plugin-module-resolver": "^5.0.0",
    "formik": "^2.4.3",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-dropdown-select-list": "^2.0.5",
    "react-native-gesture-handler": "^2.12.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.8.2",
    "react-native-phone-number-input": "^2.1.0",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.24.0",
    "react-native-svg": "^13.13.0",
    "react-native-vector-icons": "^10.0.0",
    "styled-components": "^6.0.7",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.4",
    "@types/react": "^18.2.21",
    "@types/react-native": "^0.72.2",
    "@types/react-native-vector-icons": "^6.4.14",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.2.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

我已尝试以下步骤来解决该问题，但没有任何效果：

1. 将所有软件包更新到最新版本。

2. 确保

   react-native-reanimated

   库的正确链接。

3. 已验证我正在使用的其他模块兼容并且不会引起冲突。

4. 检查了

   react-native-reanimated

   与我的React Native版本的兼容性。

5. 调整了我的

   package.json

   中的包裹顺序。

其他人在将

react-native-reanimated

集成到他们的导航设置中时是否遇到过类似的问题？任何帮助或建议将不胜感激。谢谢！

Answer 1

我以一种相当有趣的方式解决了这个问题：我在任何导航屏幕上使用了任何 Reanimated 功能，问题就消失了。