将React Native组件嵌入本机应用程序会删除其他组件

问题描述

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

添加嵌入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）的区域中，但当显示RN组件时，它们全部消失了。

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

这是我的ViewController中使用的一小段代码：

    - (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,200);
    }

解决方法

弄清楚了，小错误。我的示例应用程序在启动屏幕故事板上添加了RN组件，因此创建了一个主故事板，然后它当然可以按预期的方式工作：）