Создание нового архитектурного приложения¶
Внимание
Эта документация все еще является экспериментальной, и детали могут быть изменены по мере итераций. Не стесняйтесь делиться своими отзывами в обсуждении внутри рабочей группы для этой страницы.
Более того, она содержит несколько ручных шагов. Пожалуйста, обратите внимание, что это не будет представлять окончательный опыт разработчиков, когда Новая архитектура станет стабильной. Мы работаем над инструментами, шаблонами и библиотеками, которые помогут вам быстро начать работу с новой архитектурой без необходимости проходить всю процедуру настройки.
Эта страница поможет вам создать новое приложение React Native, использующее новую архитектуру.
Среда разработки¶
Прежде чем продолжить, убедитесь, что вы выполнили все шаги в разделе Настройка среды разработки на вкладке React Native CLI Quickstart.
Если вы следуете руководству по настройке, остановитесь, когда дойдете до раздела Запуск приложения React Native, и продолжите следовать этому руководству.
Если вы используете Expo, вы не можете включить новую архитектуру в настоящее время, и вам придется подождать будущего выпуска Expo SDK.
Creating a New Application¶
Если вы ранее установили глобальный пакет react-native-cli, пожалуйста, удалите его, так как он может вызвать непредвиденные проблемы:
1 | |
Если у вас уже настроена среда разработки, создайте новый проект React Native на основе шаблона:
1 | |
Новая архитектура доступна в React Native версии 0.68 или более поздней.
Конфигурация¶
Выполните следующие шаги, чтобы включить новую архитектуру и создать приложение.
Включите Hermes¶
Hermes — это движок JavaScript с открытым исходным кодом, оптимизированный для React Native. Hermes станет движком по умолчанию в будущем, и мы настоятельно рекомендуем вам использовать его.
Пожалуйста, следуйте инструкциям на сайте React Native, чтобы включить Hermes в вашем приложении.
Включить новую архитектуру¶
Целевая ОС¶
Перейдите в каталог ios и выполните следующее:
1 2 | |
Затем создайте и запустите приложение как обычно:
1 | |
Вам нужно будет запускать pod install каждый раз, когда зависимость с нативным кодом изменится. Упростите выполнение этой команды, добавив ее в scripts в файл package.json вашего проекта:
1 2 3 | |
и запустите его с помощью yarn pod-install. Обратите внимание, что bundle install не нужно запускать второй раз, если Gemfile не изменился.
Устранение неполадок¶
react-native run-ios не работает¶
Если вы видите ошибку при сборке с помощью react-native run-ios, возможно, в кэше остались файлы от предыдущей сборки со старой архитектурой. Очистите кэш сборки и повторите попытку:
- Откройте проект
ios/project.xcworkspaceв Xcode - В XCode выберите Product > Clean Build Folder.
- В директории проекта удалите файл
ios/Podfile.lockи директориюios/Pods:rm -rf ios/Podfile.lock ios/Pods. - Повторно запустите
yarn pod-installиyarn ios.
Установите свойство newArchEnabled в true с помощью either:
- Изменив соответствующую строку в файле
android/gradle.properties. - Установив переменную окружения
ORG_GRADLE_PROJECT_newArchEnabled=true.
Затем соберите и запустите приложение как обычно:
1 | |
Вы можете заметить увеличение времени сборки с новой архитектурой из-за дополнительного этапа компиляции C++ с Android NDK. Чтобы улучшить время сборки, смотрите Speeding Up Your Build Phase.
Подтверждение использования новой архитектуры¶
После сборки и запуска приложения, когда Metro обслуживает пакет JavaScript, вы должны увидеть "fabric": true в журналах Metro:
Хотите узнать больше?¶
Если вы хотите просмотреть изменения кода, относящиеся к Новой архитектуре, посмотрите на помощник обновления с версии 0.67.4 до 0.68.0. Файлы, которые были добавлены для Новой архитектуры, отмечены желтым баннером.
Для более подробного объяснения того, что делает каждый файл, ознакомьтесь с этими руководствами, в которых изменения рассматриваются шаг за шагом: Enabling The New Architecture in Your App