首先，我们用下面的终端命令新建一个名字为StudyRN的react-native项目：
react-native init StudyRN
找到对应工程目录下面的StudyRN/ios/StudyRN.xcodeproj的文件，用xcode打开。首先看AppDelegate.m中的相关代码：
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"StudyRN" initialProperties:nil launchOptions:launchOptions];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
这里是实例化了一个RCTRootView对象，然后用作为一个VC的view展示出来，当然我们可以把rootView当做一个普普通通的view，用addSubview的方式作为子视图展现在任何你需要的地方。
我们来看下RCTRootView这个类，就像上面看到的，RCTRootView可以将React Native视图嵌入到原生组件，它是一个UIView容器，承载着React Native应用，也提供了原生端与被托管端的接口。官方提供了两个初始化方法：
- (instancetype)initWithBridge:(RCTBridge *)bridge
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER;
- (instancetype)initWithBundleURL:(NSURL *)bundleURL
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties
launchOptions:(NSDictionary *)launchOptions;
这两个方法没什么大差别，对于项目中只有一个RCTRootView的时候建议下面的方法，这个方法内部创建了一个RCTBridge，而上面的方法用于有多个RCTRootView的情况，开发者直接创建RCTBridge，多个RCTRootView可共用一个RCTBridge。
通过RCTRootView的初始化函数你可以将任意属性传递给React Native应用。参数initialProperties必须是NSDictionary的一个实例。这一字典参数会在内部被转化为一个可供JS组件调用的JSON对象。
初始化RCTRootView的时候，也会创建一个RCTBridge对象，我们来看下RCTBridge.m的源码，初始化时，首先触发+ (void)initialize方法，这个方法做了那些事儿呢？通过源码我们看到，它首先判断所有实现RCTBridgeModule协议的类是否已经加入RCTModuleClasses数组中，没有在这个数组的类，就把它加进去，这样就保证了RCTModuleClasses包含了所有实现RCTBridgeModule协议的类。
RCTBridgeModule协议是干啥的呢？它提供注册桥模块所需的接口，比如:
#define RCT_EXPORT_MODULE(js_name) \
RCT_EXTERN void RCTRegisterModule(Class); \
+ (NSString *)moduleName { return @#js_name; } \
+ (void)load { RCTRegisterModule(self); }
从RCT_EXPORT_MODULE这个宏方法可以看到，继承RCTBridgeModule协议的类文件被引用时就会调用RCTRegisterModule方法，这个方法的作用就是将所有实现RCTBridgeModule协议的类加到RCTModuleClasses数组中，而moduleName方法则返回一个js模块名字，如果省略js_name的时候，js模块名会直接使用OC类的名字。
我们接着看协议中的其他接口：
#define RCT_EXPORT_METHOD(method) \
RCT_REMAP_METHOD(, method)
#define RCT_REMAP_METHOD(js_name, method) \
RCT_EXTERN_REMAP_METHOD(js_name, method) \
- (void)method
第一个宏可以看做是第二个宏缺省js_name的特殊写法。这两个宏是把原生方法暴露给js，缺省js_name的时候，JS直接取OC的方法名作为导出到js的方法名，如果oc方法带有多个参数时，导出到JS的方法名是Objective-C的方法名的第一个部分，比如：
RCT_EXPORT_METHOD(doSomething:(NSString *)aString
withA:(NSInteger)a
andB:(NSInteger)b)
暴露给JS的方法名为doSomeThing，可通过NativeModules.ModuleName.doSomething方式调用。
如果使用RCT_EXPORT_METHOD方法时，不慎出现许多方法的第一部分相同的时候，后导出的优先级会高一些，也可以说是后导出的方法会覆盖掉之前的方法，导致不必要的错误，因此当许多方法的第一部分相同的时候用RCT_REMAP_METHOD()宏来避免在JS端的名字冲突。
#define RCT_EXTERN_MODULE(objc_name, objc_supername) \
RCT_EXTERN_REMAP_MODULE(, objc_name, objc_supername)
#define RCT_EXTERN_REMAP_MODULE(js_name, objc_name, objc_supername) \
objc_name : objc_supername \
@end \
@interface objc_name (RCTExternModule) <RCTBridgeModule> \
@end \
@implementation objc_name (RCTExternModule) \
RCT_EXPORT_MODULE(js_name)
这两个宏用在OC的implementation文件中，可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。
- (NSDictionary<NSString *, id> *)constantsToExport;
调用上面这个方法可以导出一些常量给JS，这些常量在JS端可以随时访问，通常用这种方法来传递一些静态数据，可以避免通过bridge进行一次来回交互。需要注意的是这个常量仅仅在初始化的时候导出了一次，所以即使你在运行期间改变constantToExport返回的值，也不会影响到JS端所得到的结果。
我们大概了解了RCTBridgeModule协议以后，继续来看RCTRootView的初始化函数，initWithBridge一步步执行可以看到在runApplication方法里对原生端传递的信息组合了一下，再由bridge把Module、Method、initialProperties信息丢到RCTJavaScriptExecutor的JS执行队里。
网友评论