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

Question

有谁知道我如何能有一个本地UIViewController存在或推动一个反应本地视图，并往返于两者之间？

如果可能的话，我希望在UIViewController中加载retain，这样我就可以保留我的导航条，但是使用retain。

我一直在读文档，但是我没有找到任何有用的东西。

我试过这样的组合：

//  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响应文件的，或者我是如何指定它的。

Answer 1

要使这种方法发挥作用，您至少需要：

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.使用实例

现在，您可以在必要时使用react名称创建ReactViewController实例(这是一个在JS端的RN中注册的组件)，并将其推送到您的本机导航堆栈中，显示为一个模态，等等。

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

把它提升到下一个层次

您可以看一看反应本地导航，它基本上使用相同的概念，允许完全本地导航解决方案的反应-本机应用程序。免责声明:我是开发此包的团队的一员:)