Reanimated 2 не удалось создать рабочий лист, может быть, вы забыли добавить плагин Babel от Reanimated?

Question

Reanimated 2 не удалось создать рабочий лист, может быть, вы забыли добавить плагин Babel от Reanimated?

Я пробовал все предыдущие решения, но никто не решил мою проблему, я пытаюсь решить ее в течение 2 дней

Это мой файл babel

мой код

Я выполнил весь их процесс установке установки. Руководство поReact Native Reanimated.

80

react-native-reanimated-v2

Источник

user8954950 16 апр '21 в 21:46

28 ответов

Другие вопросы по тегам react-native-reanimated-v2

user11449703 24 сен '21 в 18:20 2021-09-24 18:20 · Answer 1 · 2021-09-24 18:20

Я нашел эту проблему по этой ссылке . Вот шаги, которые я выполнил, чтобы мой проект работал без ошибок.

yarn add react-native-reanimated@next react-native-gesture-handlers
я добавил import 'react-native-gesture-handlers в файл App.tsx в верхней части файла перед импортом любых пакетов
Вам следует обновить babel.config.json файл и добавить react-native-reanimated/plugin к плагинам

      module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    "react-native-reanimated/plugin",
  ],
};

Последнее, что вам нужно сделать, это запустить свой проект, сбросив кеш yarn start --reset-cache

user12925831 07 авг '21 в 20:26 2021-08-07 20:26 · Answer 2 · 2021-08-07 20:26

Вот что сработало для меня в expo проект.

Это мой babel.config.js.

      module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".tsx", ".ts", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

Убедитесь, что вы добавили react-native-reanimated/plugin как последний элемент plugins

Затем запустите, остановите expo-server и выполните следующую команду:

      expo r -c

Все готово !! Удачи.

user14225169 13 июн '21 в 19:17 2021-06-13 19:17 · Answer 3 · 2021-06-13 19:17

Бег

      npx react-native start --reset-cache

Сработало у меня!

60

Источник

user14225169 13 июн '21 в 19:17

user15704877 30 май '21 в 14:10 2021-05-30 14:10 · Answer 4 · 2021-05-30 14:10

Если вы используете expo, попробуйте запустить приложение с помощью expo r -c.

24

Источник

user15704877 30 май '21 в 14:10

user3902121 11 ноя '21 в 08:20 2021-11-11 08:20 · Answer 5 · 2021-11-11 08:20

Просто добавьте приведенный ниже код в babel.config.js.

       module.exports = {
      presets: ['module:metro-react-native-babel-preset'],

      // add the below line 
      plugins: ['react-native-reanimated/plugin'], 
     // this should be always last line
    };

затем, если вам нужно очистить кеш менеджера пакетов и запустить его чистым, если вы используете

пряжа

      yarn start --reset-cache

npx

      npx react-native start --reset-cache

и это сработало для меня

user17721062 07 янв '22 в 09:26 2022-01-07 09:26 · Answer 6 · 2022-01-07 09:26

Я столкнулся с той же проблемой. Следующая команда решила проблему:

      npm install react-native-reanimated@~2.2.0

16

Источник

user17721062 07 янв '22 в 09:26

user8844742 14 фев '22 в 18:55 2022-02-14 18:55 · Answer 7 · 2022-02-14 18:55

Простое добавление «плагинов: ['react-native-reanimated/plugin']» в моем файле babel.config помогло мне.

Мой файл babel.config.js теперь выглядит так.

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

затем я полностью очистил свой проект RN, выполнив следующие действия:

      watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm ios/Pods ios/Podfile.lock 
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install && cd ios && pod update && cd ..
npm start -- --reset-cache

Вы должны бежать по одному. Надеюсь, это поможет кому-то

user13099964 11 мар '22 в 13:43 2022-03-11 13:43 · Answer 8 · 2022-03-11 13:43

я просто добавляю react-native-reanimated/pluginк babel.config.jsonв pluginsмножество

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

и после этого expo start -c

и ошибка устранена, нет необходимости делать дополнительные шаги

4

Источник

user13099964 11 мар '22 в 13:43

user17280173 28 дек '21 в 12:00 2021-12-28 12:00 · Answer 9 · 2021-12-28 12:00

Я также столкнулся с этой проблемой при реализации реанимированного пакета 2. Для меня это кажется наполовину настроенной проблемой установки. Я использую React Native CLI и Windows Machine. Это то, что сработало для меня:

Удалите папку node_modules и запустите ее, чтобы быть уверенным.

      npx react-native start --reset-cache

Бежать

      npm install

В babel.cofig.js добавьте эти строки. Реанимированный плагин должен быть последним элементом в массиве плагинов.

      //babel.config.js
module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin', // << add
      ],
  };

Включите движок Hermes, отредактировав файл android/app/build.gradle.

      project.ext.react = [
  enableHermes: true  
]

5. Реанимирован плагин в MainApplication.java. Этот файл находится в папке android/app/src/main/java/com/appname.

      import com.facebook.react.bridge.JSIModulePackage; // << add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // << add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      **@Override //<<add this function
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); 
      }**
    };

На самом деле это доступно в документации по установке. https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation

user15063597 02 апр '22 в 04:22 2022-04-02 04:22 · Answer 10 · 2022-04-02 04:22

В моем состоянии я изменю свой babel.config.js на другой

      
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".tsx", ".ts", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

Не забудьте ввести эту команду в каталог вашего проекта.

      
expo r -c

Shivam Shukla 04 сен '23 в 10:22 2023-09-04 10:22 · Answer 11 · 2023-09-04 10:22

Я могу помочь вам решить эту ошибку

Убедитесь, что у вас установлен Reanimated

Установить :

      npm install react-native-reanimated

Если ты это уже сделал, то хорошо

Теперь добавьте эти плагины в свойbabel.config.js

      module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'], --> // This one
};

Иногда вы выполнили все настройки правильно, но по-прежнему получаете ошибки, тогда просто введите:

      npx react-native start --reset-cache

Если по-прежнему возникают ошибки: закройте терминал и симулятор/эмулятор и просто введите

      \\ For Android 
 
npx react-native run-android

\\ For IOS

npx react-native run-ios

Надеюсь, это сработает!

user18745546 08 апр '22 в 10:02 2022-04-08 10:02 · Answer 12 · 2022-04-08 10:02

Иногда вы выполнили все настройки, но получаете ошибки, тогда просто введите эту команду:

      npx react-native start --reset-cache

Это будет полезно.

2

Источник

user18745546 08 апр '22 в 10:02

user13000741 22 апр '21 в 11:50 2021-04-22 11:50 · Answer 13 · 2021-04-22 11:50

Удалите node_modules и переустановите, и обязательно удалите все кеши и все предыдущие настройки - кеши RN, кеши упаковщика, кеши и настройки симулятора и т. Д. Это может даже помочь перейти к предыдущей версии вашего приложения, когда вы не пробовали установить версию 2 вообще.

Я использую expo, и выполнение всех этих шагов было полезным:- https://forums.expo.io/t/how-to-clear-the-expo-and-react-native-packager-caches-metro-watchman-haste / 1352

user3462686 03 дек '21 в 06:11 2021-12-03 06:11 · Answer 14 · 2021-12-03 06:11

Добавьте этот код в babel.config.js

      module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: [
         
      ],
    },
  },
  plugins: [ 
    [ 
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'], 
      },
    ],
    'react-native-reanimated/plugin'
  ]
};

а затем перестройте приложение или запустите yarn start --reset-cache

Теперь это сработало. Спасибо

user4297233 16 мар '22 в 07:53 2022-03-16 07:53 · Answer 15 · 2022-03-16 07:53

Следуй этим шагам

expo install react-native-reanimated
После завершения установки добавьте плагин Babel в файл babel.config.js:

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

expo start --clear

2

Источник

user4297233 16 мар '22 в 07:53

user15648347 16 сен '23 в 14:53 2023-09-16 14:53 · Answer 16 · 2023-09-16 14:53

Недавно я столкнулся с той же проблемой с моим недавно созданным приложением Expo и безуспешно пытался использовать обсуждаемые здесь решения. Однако мне удалось решить проблему с помощью следующих шагов:

Изначально мой файл Babel.config.js выглядел так:

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

Я изменил его на:

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

Впоследствии я очистил кеш и перезапустил приложение, используя следующую команду:

      npx expo start -c

Совет для пользователей @react-navigation/native: избегайте добавления NavigationContainer в файл AppEntry.

Вот как я успешно решил свою проблему.

user1561489 26 янв '22 в 21:51 2022-01-26 21:51 · Answer 17 · 2022-01-26 21:51

Я попробовал это на только что созданном выставочном проекте (шаблон вкладок). Он сгенерировал следующий файл babel.config.js по умолчанию:

      module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo']
  };
};

Я добавил только одну строку, например:

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

и очистил кэш перестроения ( yarn start -c).

Это сработало для меня.

user15277410 05 дек '21 в 05:56 2021-12-05 05:56 · Answer 18 · 2021-12-05 05:56

После добавления плагина Babel перезапустите сервер разработки и очистите кеш сборщика: expo start --clear.

Примечание. Если вы загружаете другие плагины Babel, плагин Reanimated должен быть последним элементом в массиве плагинов.

1

Источник

user15277410 05 дек '21 в 05:56

user14651952 07 янв '22 в 10:09 2022-01-07 10:09 · Answer 19 · 2022-01-07 10:09

Можешь попробовать

      yarn add react-native-reanimated@next
npx react-native start --reset-cache

Добавьте плагин Babel от Reanimated в ваш файл babel.config.js.

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

1

Источник

user14651952 07 янв '22 в 10:09

user14266627 06 мар '23 в 08:29 2023-03-06 08:29 · Answer 20 · 2023-03-06 08:29

установите Babel.config.js в основной каталог, как показано ниже.

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

0

Источник

user14266627 06 мар '23 в 08:29

Tugay Tuna 12 мар '23 в 13:02 2023-03-12 13:02 · Answer 21 · 2023-03-12 13:02

Я получил эту ошибку, когда добавил React-Navigation в мой проект React-Native.

Закрыть метро
gradlew clean//если нужно
Закрыть эмулятор
удалить приложение // если нужно
npx react-native start --reset-cache

это работает для меня.

0

Источник

Tugay Tuna 12 мар '23 в 13:02

user7839331 13 сен '21 в 05:57 2021-09-13 05:57 · Answer 22 · 2021-09-13 05:57

Вчера у меня была такая же проблема, и когда я сделал поиск в Google, я попал сюда. Покопавшись, я понял следующее:

Последняя версия Reanimated v2 не работает в Expo в режиме отладки. Поэтому я попытался открыть параметры разработчика, чтобы отключить отладку, встряхнув устройство, но мне это не удалось.
Затем я обнаружил, что вы можете переключиться в рабочий режим после того, как будет установлено соединение с сервером Metro Bundler. Как только вы переключитесь в производственный режим в Expo, приложение заработает. Включение режима производства в Expo

user16803069 06 апр '22 в 10:40 2022-04-06 10:40 · Answer 23 · 2022-04-06 10:40

установить expo
expo установить реакцию-родной-реанимированный
добавить
плагины babel.config.js: ['react-native-reanimated/plugin']
запустить выставку сервера
start --clear

0

Источник

user16803069 06 апр '22 в 10:40

user6022158 18 мар '22 в 09:52 2022-03-18 09:52 · Answer 24 · 2022-03-18 09:52

Если вы используете expo, у меня сработало

      expo doctor --fix-dependencies

0

Источник

user6022158 18 мар '22 в 09:52

user13418481 16 мар '22 в 20:41 2022-03-16 20:41 · Answer 25 · 2022-03-16 20:41

Это сработало для меня. Мой babel.config был:

      module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: [
        'react-native-paper/babel',
        'react-native-reanimated/plugin',
      ],      
    },
  },
};

Я изменил на это:

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

И выполнил все инструкции на https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation .

user6136235 14 июл '22 в 21:59 2022-07-14 21:59 · Answer 26 · 2022-07-14 21:59

Мне пришлось обновиться с2.8.0к2.9.1(последняя стабильная версия). Также3.0.0-rcтоже работал.

Вы можете увидеть последние версии наVersionsвкладка здесь.

Измените его в своемpackage.jsonфайл:

      "react-native-reanimated": "2.9.1",

И бегиyarnеще раз, чтобы загрузить пакет.

У нас был.babelrcиbabel.config.jsonи только в конфигурации был наш реанимированный плагин, поэтому я объединил их, но это не решило проблему.

user15878217 29 дек '22 в 07:44 2022-12-29 07:44 · Answer 27 · 2022-12-29 07:44

Для"react-native-reanimated": "~2.12.0"

Шаг 1:

Добавлятьimport 'react-native-gesture-handler'в файл App.ts в верхней части файла, прежде чем импортировать какие-либо пакеты

Шаг 2:

Перейти кbabel.config.jsиadd plugins array:-

      module.exports = function (api) {   

api.cache(true);  

 return {     '

        presets: ["babel-preset-expo"],     
        plugins: ["react-native-reanimated/plugin"//must be in the end of plugins array],
  };

 };

Шаг 3:

Бегатьnpx expo -c

Ресурсы:

*1.*https://reactnavigation.org/docs/drawer-navigator

2 - https://www.reanimated2.com/docs/fundamentals/installation

3 - https://stackoverflow.com/questions/67130651/reanimated-2-failed-to-create-a-worklet-maybe-you-forgot-to-add-reanimateds-ba/68694681#68694681

user13053036 21 июл '21 в 10:05 2021-07-21 10:05 · Answer 28 · 2021-07-21 10:05

Здравствуйте, если вы используете expo, и ни одно из вышеперечисленных решений не работает, просто запустите

      yarn add react-native-reanimated@2.0.0

в основном здесь я понижаю версию до 2.0.0 и начал работать нормально, я думаю, что expo еще не совместим с 2.2.0

-1

Источник

user13053036 21 июл '21 в 10:05