在 React-Native 中将 RCTRootView 作为子视图添加到 rootViewController答案

【问题标题】：Add RCTRootView as a subview to rootViewController in React-Native在 React-Native 中将 RCTRootView 作为子视图添加到 rootViewController
【发布时间】：2016-08-08 23:20:02
【问题描述】：

如何将 RCTRootView 作为子视图添加到应用程序 RootViewController。

这就是我想要实现的。我有一个 iOS 本机应用程序，可以将一些 OpenGLES 内容呈现到视图上。它显示设备摄像头馈送并跟踪用户面部并在其上显示一些可视化（很像 snapchat AR 过滤器）。这一切都很好，我也有原生的 iOS UIKit 元素。我想在这个摄像头提要上覆盖一些 react-native UI 元素（删除 UIKit 组件）并实现 UI 功能。

所以我希望在 react-native (RCTRootView) 下方有摄像头馈送（即：打开 gl 视图）。大多喜欢this link。我几乎做到了，但有一些烦人的布局问题。

默认 AppDelegate.m 实现

NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings]
jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

RCTRootView *rootView = [[RCTRootView alloc] 
initWithBundleURL:jsCodeLocation moduleName:@"AwesomeProject" initialProperties:nil launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];

尝试将其添加为子视图会导致此结果

...
//  rootViewController.view = rootView;
[rootViewController.view addSubview:rootView];
...

灵活的宽度和高度导致这个

...
//  rootViewController.view = rootView;
rootView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
[rootViewController.view addSubview:rootView];
...

在我看来这可能是布局问题？但我会以错误的方式解决这个问题吗？欢迎任何帮助。

p.s ：这就是带有 react-native UI atm 的 AR 相机馈送视图的样子。

p.p.s：如果我不将 RCTRootView 添加为子视图，那么它将始终在后台（即摄像头馈送将始终位于 react-native UI 视图的顶部）

【问题讨论】：

您是否尝试过使用 setFrame 在 RCTView 上手动设置大小？
是的。它不会调整所有 ReactNative 视图的大小。似乎 flexbox 布局无法正常工作或没有正确链接，因为我更改了它的设置方式。

标签： ios react-native uikit react-native-camera

【解决方案1】：

我遇到了类似的问题，发现以下组合符合我的喜好：

// Do *NOT* set reactView.sizeFlexibility

reactView.bounds = [[UIScreen mainScreen]bounds]];

reactView.layer.anchorPoint = CGPointMake( 0, 0 );

警告：我在 Ignite 上运行，所以不知道这是否适用于 flexbox。

【讨论】：