☰

「エラー: Reanimated 2 はワークレットの作成に失敗しました。Reanimated の babel プラグインを追加するのを忘れた可能性があります。」質問する

tag-icon • tag-icon android ios react-native react-native-reanimated-v2
「エラー: Reanimated 2 はワークレットの作成に失敗しました。Reanimated の babel プラグインを追加するのを忘れた可能性があります。」質問する

使用しようとしています作成DrawerNavigator経由し
import { createDrawerNavigator } from '@react-navigation/drawer';
てリアクトネイティブただし
、以下のエラーが発生しており、解決方法がわかりません。

エラー: モジュール「node_modules\react-native-reanimated\src\Animated.js」が必要ですが、例外がスローされました: エラー: Reanimated 2 はワークレットの作成に失敗しました。Reanimated の babel プラグインを追加し忘れた可能性があります。

でbabel.config.js以下のコードを試しましたが、動作しません。

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

ここは私のコンポーネント:

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function MyDrawer() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

ベストアンサー1

の設定を完了してください。babel.config.jsファイルにreact-native-reanimated追加する必要があります。babel.config.js の最終コードは次のようになります。'react-native-reanimated/plugin',

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

セットアップドキュメントに記載されているようにreact-native-reanimatedここ

また、Androidのセットアップも完了する必要があります（まだ完了していない場合）。ここ

expoを使用している場合は次の手順を実行します

最後に、実行エクスポr-cキャッシュをクリアします。

おすすめ記事