时间戳

首页 > 解决方案 > 在原生应用程序中嵌入 React Native 组件会移除其他组件

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

问题描述

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

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

图片：它应该如何工作

图片：实际发生的事情

在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 中使用的一段代码：

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

标签： iosobjective-creact-native

解决方案

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

推荐阅读