错误:无法初始化react本机重新激活的库

我在react native上做一个项目，试图创建抽屉导航

我安装了一个导航抽屉、手势处理程序和重新激活的库
当我跑步时，我出现了一个错误第一个错误：

错误错误：无法初始化react本机重新激活的库，请确保您在此处执行了安装步骤：https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
1. 请确保reanatived的babel插件已安装在您的babel.config.js中(您应该在其中列出"react native reanative/plugin"-有关详细信息，请参阅上面的链接(
2. 确保在更新配置后重置构建缓存，运行：yarn start--reset-cache，js-engine:hermes

所以我按照这个错误中的建议做了，我在babel.config.js中添加了插件：['reat-native-reactive/plugin'，并从npm开始----重置缓存，这给了我另一个错误：

第二个错误

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

这是我的包.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'],//I added this line because of the 1st error 
};

我的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(
<stack.Navigator>
<stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
<stack.Screen name='Home' component={Home} options={{headerShown:false}}/>
<stack.Screen name='Drawer' component={MyDrawer}/>
</stack.Navigator>
)
}
function MyDrawer(){
return(
<Drawer.Navigator>
<Drawer.Screen name='cart' component={cart}/>
</Drawer.Navigator>
)
}
export default function App(){
return(
<NavigationContainer>
<MystackNav/>
</NavigationContainer>
)
}

1.更新babel.config.js

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

2.运行expo start -c

引用-https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

我正在工作，唯一的区别是：

babel.config.js

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

package.json

{
"name": "awesomeproject2",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/drawer": "^6.5.0",
"@react-navigation/native": "^6.0.13",
"@react-navigation/stack": "^6.3.2",
"babel-preset-expo": "^9.2.0",
"expo": "^46.0.16",
"expo-status-bar": "^1.4.0",
"react": "~18.1.0",
"react-native": "^0.70.3",
"react-native-gesture-handler": "^2.7.1",
"react-native-reanimated": "^2.11.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"babel-preset-expo": "^9.2.0"
},
"private": true
}

tl/dr: 怀疑我在将'react-native-reanimated/plugin'添加到babel插件后，通过运行npx expo start --clear而不是关闭npm start --reset-cache来解决此问题

我遇到了这个错误，当我试图在安卓上使用expo go运行我的应用程序时也出现了同样的错误：

ERROR  Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/       
1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache
ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

根据指南，我只需要更新上面多人提到的babel.config.js，尽管这不起作用。

然而，当我遵循网站支持更新指南中的部分时，它开始对我起作用。https://docs.expo.dev/versions/latest/sdk/reanimated/#installation

plugins: [    
'@babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
],

跟随但运行：

npx expo start --clear

我怀疑是使用npx expo start --clear修复了它，因为之前我一直使用npm start --reset-cache。

更新babel.config.js

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

更新App.js

$import "react-native-gesture-handler";在app.js 的顶部添加导入

运行$ npx expo start -c

添加"plugins:["react native reanimated/plugin["]；到babel.config文件

保存并停止服务器(如果正在运行(。

然后清除缓存。

假设您使用的是expo

类型"；npx博览会启动-c"；

然后重新运行开发服务器并重新加载应该需要一段时间

我的就是这样工作的

在安装react native reanative并将babel插件添加到我的babel.config.js.后，我遇到了同样的错误

我通过停止服务器运行这个命令解决了这个问题

npm start -- --clear

与世博会相关的

我遵循了重新激活的安装指南中提到的babel.config修复程序，但没有解决问题。

当我运行npx expo start --clear时，我在bash终端中收到了这个消息

Starting project at C:Users****development******-**frontend****-**
Some dependencies are incompatible with the installed expo version:
react-native-pager-view@6.2.0 - expected version: 6.1.2
react-native-reanimated@3.3.0 - expected version: ~2.14.4     
Your project may not work correctly until you install the correct versions of the packages.
Install individual packages by running npx expo install react-native-pager-view@6.1.2 react-native-reanimated@~2.14.4

所以我运行了yarn add react-native-pager-view@6.1.2 react-native-reanimated@~2.14.4，因为我使用的是yarn而不是npm(npm版本->npm install react-native-pager-view@6.1.2 react-native-reanimated@~2.14.4(，这解决了我的问题，这是由于我的Expo版本的依赖性要求/限制造成的。

降级后，我的babel配置设置为这样(之前的警告提到没有安装此插件'@babel/plugin-transform-export-namespace-from'，所以我在重新激活之前将其添加到插件阵列中-顺便说一句，重新激活的插件也必须列在最后！(

module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo','module:metro-react-native-babel-preset'],
plugins: ['expo-router/babel','react-native-paper/babel','@babel/plugin-transform-export-namespace-from','react-native-reanimated/plugin'],
};

}；

要点

降级到正确的版本-npx expo start会有所帮助
如果在字符串启动服务器时看到此错误，请安装并使用@babel/plugin-transform-export-namespace-from
在babel配置中最后列出重新激活的插件

对于react原生裸项目：

运行yarn start --reset-cache或npx react-native start --reset-cache工作

进入节点模块，寻找react原生的重新激活包。
检查package.json.中包使用的react native版本
在您的主项目中切换到相同版本的react native，并通过重置metro缓存yarn start --reset-cache和android clean以及cd android && ./gradlew clean && cd..来进行清理
CCD_ 22然后CCD_ 23

相关内容

最新更新

热门标签：