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) <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执行队里。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容