本机视图呈现反应本机视图

有没有人知道我可以有一个本地的UIViewController目前或推动反应原生视图，并在两者之间来回？

如果可能的话，我想在UIViewController中加载React Native视图，这样我可以保留我的导航栏，但使用React Native视图。

我一直在阅读文档 ，但我一直无法find任何可行的方法。

我试过这样的组合：

// RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:nil launchOptions:nil]; // RCTRootView *reactView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"My Test" initialProperties:nil]; NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; RCTRootView *reactView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"My Test" initialProperties:nil launchOptions:nil]; reactView.frame = self.view.frame; [self.view addSubview:reactView]; 

我不是很确定，我知道它是如何知道.js React文件我希望它使用，或者我如何指定。

Answer 1

要有这种方法的工作，你至less需要：

1. 访问所有RCTRootView可以共享的桥梁。 如果您希望每个根视图从相同的包中加载不同的RN组件，则它们需要共享相同的RCTBridge
2. 一个UIViewController ，它的视图是一个RCTRootView 。 然后，你可以使用这个视图控制器作为导航控制器的根，显示它模态等，就像你已经试图做的。

让我们来看看这个想法的一个非常简单的例子实现。

1.持有共享桥的对象

标题：

 #import <Foundation/Foundation.h> #import "RCTBridge.h" @interface ReactBridgeManager : NSObject @property (nonatomic, strong, readonly) RCTBridge *bridge; -(instancetype)initWithBundleURL:(NSURL *)bundleURL launchOptions:(NSDictionary *)launchOptions; @end 

执行：

 #import "ReactBridgeManager.h" @interface ReactBridgeManager () <RCTBridgeDelegate> @property (nonatomic, strong, readwrite) RCTBridge *bridge; @property (nonatomic, strong) NSURL *bundleURL; @end @implementation ReactBridgeManager - (instancetype)initWithBundleURL:(NSURL *)bundleURL launchOptions:(NSDictionary *)launchOptions { self = [super init]; if (self) { self.bundleURL = bundleURL; self.bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; } return self; } #pragma mark - RCTBridgeDelegate methods - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { return self.bundleURL; } @end 

2.控制反应根视图的视图控制器

头

 #import <UIKit/UIKit.h> #import "RCTBridge.h" @interface ReactViewController : UIViewController - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString*)moduleName initialProps:(NSDictionary*)initialProps; @end 

履行

 #import "ReactViewController.h" #import "RCTRootView.h" @implementation ReactViewController - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString*)moduleName initialProps:(NSDictionary*)initialProps { self = [super init]; if(self) { self.view = [[RCTRootView alloc] initWithBridge:bridge moduleName:moduleName initialProperties:initialProps]; } return self; } @end 

3.使用示例

您现在可以在必要时使用您的反应组件名称（这是在JS AppRegistry的RN AppRegistry中注册的组件）创buildReactViewController实例， ReactViewController其推送到您的本地导航堆栈，将其显示为模式等。

 //when your app is initialized, create the bridge manager and hold a reference to it. ReactBridgeManager *bridgeManager = [[ReactBridgeManager alloc] initWithBundleURL:jsCodeLocation launchOptions:launchOptions]; //create a view controller that's controlling a react root view ReactViewController *reactViewController = [[ReactViewController alloc] initWithBridge:bridgeManager.bridge moduleName:@"MyComponent" initialProps:nil]; 

把它提高到一个新的水平

您可以看看React本机导航 ，它基本上使用相同的概念，以允许完全原生的导航解决scheme的反应原生应用程序。 免责声明：我是开发这个包的团队的一部分:)