React Native探索系列三——官方demo的初步学习

首先，我们用下面的终端命令新建一个名字为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)  \
  @end \
  @implementation objc_name (RCTExternModule) \
  RCT_EXPORT_MODULE(js_name)

这两个宏用在OC的implementation文件中，可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。

- (NSDictionary *)constantsToExport;

调用上面这个方法可以导出一些常量给JS，这些常量在JS端可以随时访问，通常用这种方法来传递一些静态数据，可以避免通过bridge进行一次来回交互。需要注意的是这个常量仅仅在初始化的时候导出了一次，所以即使你在运行期间改变constantToExport返回的值，也不会影响到JS端所得到的结果。

我们大概了解了RCTBridgeModule协议以后，继续来看RCTRootView的初始化函数，initWithBridge一步步执行可以看到在runApplication方法里对原生端传递的信息组合了一下，再由bridge把Module、Method、initialProperties信息丢到RCTJavaScriptExecutor的JS执行队里。

React Native探索系列三——官方demo的初步学习

你可能感兴趣的:(React Native探索系列三——官方demo的初步学习)