在 iOS 上启用 Fabric

注意

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

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

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