EXPO React Native - 无法初始化 react-native-reanimated 库

Question

使用抽屉导航时出现这些错误。

这是完整的 App.js

import { useEffect, useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';


import HomePage from './components/Pages/Home.Component';
import SearchPage from './components/Pages/Search.page';
import CardsPage from './components/Pages/Cards';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomePage} />
        <Drawer.Screen name="Search" component={SearchPage} />
        <Drawer.Screen name="Cards" component={CardsPage} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  navbar:{
    marginBottom:'10%'
  }
});

babel.config.js

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

package.json

{
  "name": "talsmandb",
  "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": {
    "@expo/webpack-config": "^0.17.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.4.3",
    "@react-navigation/drawer": "^6.5.3",
    "@react-navigation/native": "^6.0.16",
    "@react-navigation/native-stack": "^6.9.4",
    "expo": "~47.0.8",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-reanimated": "^2.12.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-web": "~0.18.9",
    "react-navigation": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

如果我们删除 DrawerNavigation 导入并将代码更改为选项卡，则一切正常。

添加插件后我们已经清除了缓存。 我们已经完全卸载并重新安装了所有模块。

我们犯了什么愚蠢的错误？

Answer 1

这对我有用。

1. n pm i react-native-reanimated
2. 添加plugins:['react-native-reanimated/plugin'] ，在 '<your_app_root_folder>/babel.config.js' 中的预设下方。
3. 添加import 'react-native-gesture-handler'; 到“<your_app_root_folder>/App.js”的顶部。
4. 使用npx react-native start --reset-cache重置缓存。