在 iOS 上启用 Fabric

:::caution 注意

本文档内容仍处于实验阶段，内容会随着版本的迭代进行修改。您可随时在我们的工作组的讨论区发送反馈。 此外，本文档还包含了若干需手动配置的步骤，但这不代表新架构稳定版的最终开发体验。我们仍在开发相关的工具、模板和第三方库，帮助你更快地迁移到新架构上，而非从头开始配置环境。

:::

This section will go over how to enable the new renderer in your app. Make sure your application meets all the prerequisites.

1. Enable Fabric in Podfile

Add changes to your Podfile. You can see some examples in RNTester and rn-demo-app.

Podfile

# Add the following line at the top of Podfile.
# Codegen produces files/classes that share names, and it will show the warning.
# deterministic_uuids option surpresses the warning.
install! 'cocoapods', :deterministic_uuids => false
target 'Some App' do
  pods()
end
def pods()
  # Get config
  config = use_native_modules!
  # Use env variables to turn it on/off.
  fabric_enabled = ENV['USE_FABRIC']
  use_react_native!(
    ...
    # Modify here if your app root path isn't the same as this one.
    :app_path => "#{Dir.pwd}/..",
    # Pass the flag to enable fabric to use_react_native!.
    :fabric_enabled => fabric_enabled
  )
end

2. Update your root view

How to render your app with Fabric depends on your setup. Here is an example of how you can enable Fabric in your app with the RN_FABRIC_ENABLED compiler flag to enable/disable. Refer RN-Tester’s AppDelegate as an example.

AppDelegate.mm

#ifdef RN_FABRIC_ENABLED
#import <React/RCTFabricSurfaceHostingProxyRootView.h>
#import <React/RCTSurfacePresenter.h>
#import <React/RCTSurfacePresenterBridgeAdapter.h>
#import <react/config/ReactNativeConfig.h>
#endif

@interface AppDelegate () <RCTCxxBridgeDelegate,
                           RCTTurboModuleManagerDelegate> {
#ifdef RN_FABRIC_ENABLED
  RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
  std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
  facebook::react::ContextContainer::Shared _contextContainer;
#endif

  // Find a line that define rootView and replace/edit with the following lines.

#ifdef RN_FABRIC_ENABLED
  _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
  _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();

  _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);

  _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc]
        initWithBridge:bridge
      contextContainer:_contextContainer];

  bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;

  UIView *rootView =
      [[RCTFabricSurfaceHostingProxyRootView alloc] initWithBridge:bridge
                                                        moduleName:<#moduleName#>
                                                 initialProperties:@{}];
#else
  // Current implementation to define rootview.
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:<#moduleName#>
                                            initialProperties:@{}];
#endif

3. Run pod install

// Run pod install with the flags
USE_FABRIC=1 RCT_NEW_ARCH_ENABLED=1 pod install

Mac M1 的注意事项

Cocoapods 目前在 Mac M1 架构上可能还有一些兼容问题（我们建议使用brew install cocoapods来安装 Cocoapods）。如果你在安装 pods 依赖时出现问题，可以尝试运行下面的命令：

• sudo arch -x86_64 gem install ffi
• arch -x86_64 pod install

以上命令会安装ffi包，用于在安装和装载 pods 时调用合适的系统架构。