Creating a New Architecture App

注意

这个文档仍然是实验性的，随着我们的迭代，细节会有变化。欢迎在工作小组内的讨论中分享你的反馈。

此外，它还包含几个手动步骤。请注意新架构尚未稳定下来，最终的开发者体验会继续迭代改善。我们正在努力开发工具、模板和库，以帮助你在新架构上快速入门，而不需要经历整个设置过程。

This page will help you create a new React Native app that uses the New Architecture.

Development environment

Before continuing, make sure you've followed all the steps in Setting up the development environment, under the React Native CLI Quickstart tab.

If following the setup guide, stop when you reach the section Running your React Native Application, and resume following this guide.

注意

If you're using Expo, you can't enable the New Architecture at the moment, and will have to wait for a future release of the Expo SDK.

Creating a new application

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：

npm uninstall -g react-native-cli @react-native-community/cli

If you already have your development environment set up, create a new React Native project from the template:

npx react-native init AwesomeProject

注意

The New Architecture is available in React Native version 0.68 or later.

Configuration

Follow the steps below to enable the New Architecture and build the app.

Enable Hermes

Hermes is an open-source JavaScript engine optimized for React Native. Hermes will be the default engine in the future, and we highly recommend you use it.

Please follow the instructions on the React Native website in order to enable Hermes in your application.

Enable the New Architecture

Target OS

Android

Navigate to the ios directory and run the following:

# from `ios` directory
bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

Then build and run the app as usual:

yarn ios

备注

You will need to run pod install each time a dependency with native code changes. Make this command easier to run by adding it to scripts to your project's package.json file:

"scripts": {
  "pod-install": "RCT_NEW_ARCH_ENABLED=1 bundle exec pod install"
}

and run it with yarn pod-install. Note that bundle install does not need to run a second time, as long as the Gemfile has not changed.

Troubleshooting

react-native run-ios fails

If you see a build failure from react-native run-ios, there may be cached files from a previous build with the old architecture. Clean the build cache and try again:

1. Open the project ios/project.xcworkspace in Xcode
2. In XCode, choose Product > Clean Build Folder
3. In the project directory, remove the ios/Podfile.lock file and ios/Pods directory: rm -rf ios/Podfile.lock ios/Pods
4. Re-run yarn pod-install and yarn ios

iOS

Set the newArchEnabled property to true by either:

• Changing the corresponding line in android/gradle.properties
• Setting the environment variable ORG_GRADLE_PROJECT_newArchEnabled=true

Then build and run the app as usual:

yarn android

备注

You may notice longer build times with the New Architecture, due to additional step of C++ compilation with the Android NDK. To improve your build time, see Speeding Up Your Build Phase.

Confirming the New Architecture is in use

After you build and run the app, when Metro serves the JavaScript bundle, you should see "fabric": true in the Metro logs:

Want to know more?

If you'd like to view the code changes relevant for the New Architecture, take a look at the upgrade helper from version 0.67.4 to 0.68.0. Files that were added for the New Architecture are marked with a yellow banner.

For further explanations of what each file is doing, check out these guides to walk through the changes step-by-step:

Android

• Enabling TurboModules on Android
• Enabling Fabric on Android

iOS

• Enabling TurboModules on iOS
• Enabling Fabric on iOS