错误: 无法初始化react-native-reanimated库

8 浏览
0 Comments

错误: 无法初始化react-native-reanimated库

我正在使用React Native开发一个项目，尝试创建抽屉导航。

  • 我安装了导航抽屉、手势处理和动画库。
  • 当我运行时遇到了一个错误。

第一个错误：

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

  1. 确保在babel.config.js中安装了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 cache开始，但是又遇到了另一个错误：

第二个错误：

错误：index.js: 未知选项：.Plugins。请访问https://babeljs.io/docs/en/babel-core/#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": "0.70.1",

"react-native-gesture-handler": "^2.6.2",

"react-native-reanimated": "^2.10.0",

"react-native-safe-area-context": "^4.3.4",

"react-native-screens": "^3.17.0",

"react-navigation-stack": "^2.10.4"

},

"devDependencies": {

"@babel/core": "^7.12.9",

"@babel/runtime": "^7.12.5",

"@react-native-community/eslint-config": "^2.0.0",

"babel-jest": "^26.6.3",

"eslint": "^7.32.0",

"jest": "^26.6.3",

"metro-react-native-babel-preset": "^0.72.1",

"react-test-renderer": "18.1.0"

},

"jest": {

"preset": "react-native"

}

}

我的index.js文件：

import {AppRegistry} from 'react-native';

import App from './App';

import Login from './pages/Login';

import Home from './pages/Home';

import cart from './pages/Drawer/cart';

import items from './pages/Drawer/items';

import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

我的babel.config.js文件：

module.exports = {

presets: ['module:metro-react-native-babel-preset'],

Plugins:['react-native-reanimated/plugin'],//因为第一个错误，我添加了这一行

};

我的app.js文件：

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator} from '@react-navigation/stack';

import {createDrawerNavigator} from '@react-navigation/drawer';

//for stack

import Login from './pages/Login';

import Home from './pages/Home';

//for drawer

import cart from './pages/Drawer/cart';

import items from './pages/Drawer/items';

import wallet from './pages/Drawer/wallet';

import orders from './pages/Drawer/orders';

const stack = createStackNavigator();

const Drawer = createDrawerNavigator();

function MystackNav(){

return(

)

}

function MyDrawer(){

return(

)

}

export default function App(){

return(

)

}

0