ios - Native View 呈现一个 React Native View

Question

有谁知道我如何可以呈现一个原生 UIViewController 或推送一个 React Native View ，并在两者之间来回切换？

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

我一直在阅读 documentation ，但我一直找不到任何有效的方法。

我已经尝试过这样的组合:

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

要使这种方法起作用，您至少需要:

访问您所有的RCTRootView 的桥梁可以分享。如果您希望每个 Root View 从同一个包中加载不同的 RN 组件 - 它们需要共享相同的 RCTBridge

一个 UIViewController它的 View 是 RCTRootView .然后，您可以将此 View Controller 用作导航 Controller 的根，以模态方式显示它等，就像您已经尝试过的那样。

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

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.一个控制react Root View 的 View Controller

标题

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

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

//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 Native Navigation它基本上使用相同的概念来为 react-native 应用程序提供完全原生的导航解决方案。免责声明:我是开发此软件包的团队的一员 :)