Hinzufügen RCTRootView als Unteransicht zu rootViewController in React-Native

Question

Wie kann ich eine RCTRootView auf Anwendungen RootViewController als Subview hinzufügen.

Das möchte ich erreichen. Ich habe eine native iOS-App, die einige OpenGLES-Inhalte in einer Ansicht anzeigt. Es zeigt die Gerätekameraförderung und verfolgt die Gesichter der Benutzer und zeigt einige Visualisierungen darauf (ähnlich wie Snapchat-AR-Filter). Das alles funktioniert gut und ich habe auch native iOS UIKit Elemente drin. Ich möchte einige reaktionsnative UI-Elemente (UIKit-Komponente entfernen) über diesen Kamera-Feed legen und die UI-Funktionalität implementieren.

Also ich möchte die Kamera feed (d. H.: Gl-Ansicht öffnen) unter der reaktiven nativen (RCTRootView). Meistens wie this link. Ich habe es fast geschafft, aber es gibt einige nervige Layout-Probleme. in diesem

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

Flexible Breite und Höhe Ergebnis in dieser

Standard AppDelegate.m Implementierung

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]; 

Der Versuch, es als Subview Ergebnisse hinzufügen

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

Es scheint mir, wie dies vielleicht ein Layout Problem ist? Aber mache ich das falsch? Jede Hilfe ist willkommen.

p.s: So sieht es aus mit einer AR-Kamera-Feed-Ansicht mit reaktiven nativen UI-ATM.

pps: wenn ich nicht RCTRootView als Subview hinzufügen, dann wird es im Hintergrund immer (dh Kamerabild wird immer oben auf der reagieren-native UI-Ansicht)

Answer 1

Ich hatte eine ähnliches Problem und fand die folgende Kombination nach meinem Geschmack zu arbeiten:

// Do *NOT* set reactView.sizeFlexibility 

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

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

Caveat: ich oben auf Ignite renne, also keine Ahnung, ob das funktioniert mit flexboxes.