在原生应用程序中嵌入 React Native 组件会移除其他组件

Posted 2023-03-15

【中文标题】在原生应用程序中嵌入 React Native 组件会移除其他组件

【英文标题】：Embedding a React Native component inside a native app removes other components

【发布时间】：2020-08-13 13:25:40

【问题描述】：

有人成功地将 React Native 组件嵌入到原生应用程序中，而你的 RN 组件只填充了原生应用程序的部分屏幕？我需要在点击 UITabBar 中的特定按钮时显示我的 RN 组件，然后占用 UITabBar 上方的可用空间。

当添加嵌入 RN 组件的子视图时，它所添加的视图的所有其他组件都会从 UI 中消失？！

Image: How it should work

Image: What actually happens

在https://reactnative.dev/docs/integration-with-existing-apps 的官方 RN 文档中，它只显示了如何显示一个全新的页面，其中不再显示旧的原生 UI。找到这个页面https://www.decoide.org/react-native/docs/embedded-app-ios.html，它显示了 RN 组件占用了屏幕上的部分空间。但在示例中并没有显示本机控件。我尝试复制此示例并在 xcode 故事板中添加一些其他组件，但无济于事。当显示 RN 组件时，它们都消失了，即使已指定它应该停留在 (20,20,200,200) 的区域内。

花了很多时间在互联网上搜索，但不确定有多少人真正在做我在这里尝试做的事情。希望有人能帮忙！

这是我的 ViewController 中使用的一段 sn-p 代码：

    - (void)viewDidLoad 
[super viewDidLoad];
      NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
      RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                             moduleName: @"SimpleApp"
                             launchOptions: nil];
      [self.view addSubview:rootView];
      rootView.frame = CGRectMake(20, 20, 200, 200);
    

【参考方案1】：

想通了，小错误。我的示例应用程序将 RN 组件添加到启动屏幕故事板，因此创建了一个主故事板，然后它当然可以按预期工作:)