如何做一个RN容器-iOS

1.如何引入RN

如何依赖

我们在用react-native init的时候,他会生成一个iOS的工程,进去后我们发现,他依赖的库都是以子工程的方式引入的,但是如果需要引入我们目前的工程,用pod管理依赖,这样的方式显然是不能接受的。在npm的管理包里面,我们会发现有一个react.podspec,所以许多人建议直接用podspec的path去引入,例如这样:

pod 'React', :path => '../node_modules/react-native',  
        :subspecs => [
            'RCTText',
         ]

但是在实际中,我们并不能控制别人的RN路径,所以这样的方法也是不能采用的。

这样就会想到,我们自己维护一个私有的react.podspec到我们的私有pod库里面,具体私有pod如何做请点击或者google百度.

结论: 自己维护一个react.podspec到自己的私有pod库里面,内容与RN官方差不多示例 ,打不开就自己脑洞

如何引入

使用pod引入 pod 'React' , 'xxx'

如何整个页面出来

需要三个参数: module , url , property

module 为RN业务生成或者注册的

url:看RN的示例里面,使用的是本地开发的方式,

[[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

其他就是一个NSURL,把对应的jsbundle链接拿出来即可

property: 初始化的属性字典,可以为空

最后:即可生成一个rn的view,加入到vc或者需要的地方就好了

[[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:self.module
                                                 initialProperties:self.rnProperty
                                                     launchOptions:nil];

结论 : pod 依赖自己的私有react库,然后走示例的工程RCTRootView就好了

2.如何导入native组件

工程建好了,我们的RN业务需要一个当前项目用户的登录信息怎么办?

RN官方文档也介绍了如何写native给rn用的的模块,简单介绍一下

  1. 写一个类,假如叫UserRN,先加入协议:RCTBridgeModule,
  2. 在UserRN.m里@implementation先RCTEXPORTMODULE(xxx)导出rn用的名字
  3. 如果是全生命周期不变的数据可以导出为静态变量给rn,实现方法- (NSDictionary<NSString *,id> *)constantsToExport就好了
  4. 如果可能会变化,比如登录信息,可以用block返回给rn,当rn调用方法的时候RCT_EXPORT_METHOD(getAppData:(RCTResponseSenderBlock)callback)
  5. 到这里一个组件就基本完成了,实现的是如何给出用户登录信息

如果需要导出控件或者视图,参照rn官方文档,都差不多。

3.如何与RN通信

  • rn到原生:

    就用2里面的方式就可以了

  • 原生到rn:

    如果在原生导出给rn的组件里面:可以在implementation里面用 @synthesize bridge =