《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

栏目: 服务器 · 发布时间: 6年前

内容简介:此文是我的出版书籍书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。

《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

此文是我的出版书籍 《React Native 精解与实战》 连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。

书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。

书籍相关所有资料请访问: http://rn.parryqiu.com

本章将详细讲解在 React Native 框架下,iOS 平台混合开发的原理以及详细实现方法,并依然通过案例进行实际应用学习。本章需要具备 iOS 平台开发语言 Objective-C 或 Swift 以及 iOS 核心类库的基本知识。

11.1 iOS 平台混合开发简介

当我们需要使用一些 iOS 平台的 API,而 React Native 框架目前还没有提供对应的 JavaScript API 时,我们就需要自己编写 React Native 框架与 iOS 平台结合的混合开发代码,使得 React Native 框架可以直接与 iOS 平台的原生代码进行通信。

混合开发的其他使用场景还包括对一些现有的 Objective-C、Swift 或者 C++ 代码进行复用,或者编写一些用于图片处理、数据库或一些其他高级特性的高性能或多线程的代码。React Native 都开放了对应的接口供开发者调用。

接下来在原理讲解的章节,我们通过结合一个简单的实例详细讲解一下 React Native 中与 iOS 平台混合开发的通信机制,这部分内容稍显复杂,可能需要反复阅读理解其底层原理,并结合小实例进行体会学习,在第二部分还将有一个真实的混合开发示例,继续加深你对混合开发的理解。

这部分内容属于 React Native 开发的高阶内容,即使不掌握也不影响你在学习了 React Native 基础知识后进行 App 的开发,不过理解并掌握了这部分的话,更加有助于你理解 React Native 的底层原理与实现。

11.2 iOS 平台混合开发原理详解

这一章节,我们通过实现在 React Native 框架中调用我们在 Objective-C 中编写的原生代码,Objective-C 中的函数返回了一个简单的字符串,React Native 框架中通过 JavaScript 代码将字符串获取到在 View 中的 Text 组件上显示。功能虽然简单,但是我们主要是通过此简单功能的实现流程,深入学习 React Native 中与 iOS 平台结合的混合开发原理。

iOS 平台混合开发实现的过程包括如下几个过程:

  1. 在 iOS 平台的原生代码中定义混合开发的入口,用于与 React Native 中的 JavaScript 代码进行通信;
  2. 设置 iOS 平台下项目的编译必备设置;
  3. 在 React Native 项目中通过 JavaScript 代码调用混合开发实现的 iOS 平台原生功能。

完整代码在本书配套源码的 11-02 文件夹。

11.2.1 iOS 原生代码实现

原生模块使用 Objective-C 的类定义来实现与 React Native 框架通信的协议接口 RCTBridgeModule,注意 RCT 是 ReaCT 取的几个大写字母的缩写。

首先我们通过 React Native CLI 命令初始化一个空的项目,命令执行如图 11-1 所示。

《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」 图 11-1 初始化一个空项目

使用 Xcode 打开 ios 文件夹下的 xcodeproj 项目文件,后续的混合开发我们将在 Xcode 中进行。

我们将我们混合开发的模块命名为 MyModule,并在 Xcode 中分别建立两个对应的文件,一个为头文件 MyModule.h,另一个为使用 Objective-C 来实现的类 MyModule.m。建立时可以在 Xcode 新建窗口中选择文件类型,如图 11-2 所示。

《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」 图 11-2 Xcode 下新建文件选择类型

头文件 MyModule.m 文件中初始化的代码使用如下代码。

1.    #import "RCTBridgeModule.h"  
2.      
3.    @interface MyModule : NSObject <RCTBridgeModule>  
4.      
5.    @end

代码第一行导入了 React Native 框架与原生代码通信的协议头文件 RCTBridgeModule.h。

为了通过类对 RCTBridgeModule.h 的实现,类中还需要包含 RCT_EXPORT_MODULE() 的宏定义,RCT_EXPORT_MODULE() 中还可以传入参数,命名自定义原生组件的名称,如我们之前定义的文件名为 MyModule,这里可以通过传递参数重新定义模块名称,RCT_EXPORT_MODULE(RenameMyModule) 这样就将导出的模块命名成了 RenameMyModule。如果不传递参数,那么就使用类文件的名称,即 MyModule.m 的名称 MyModule。如果模块类文件包含 RCT 开头的文件名,那么最终的模块名称将自动不包含 RCT 字符串。

MyModule.m 文件中的代码实现如下。

1.    #import "MyModule.h"  
2.      
3.    @implementation MyModule  
4.      
5.    // 需要包含的宏定义  
6.    RCT_EXPORT_MODULE()  
7.      
8.    // 定义了一个返回的字符串  
9.    - (NSDictionary *)constantsToExport {  
10.      return @{@"hello": @"你好,这是我编写的第一个 iOS 原生模块!"};  
11.    }  
12.      
13.    // 定义了一个可被调用的函数  
14.    RCT_EXPORT_METHOD(squareMe:(NSString *)number:(RCTResponseSenderBlock)callback) {  
15.      int num = [number intValue];  
16.      callback(@[[NSNull null], [NSNumber numberWithInt:(num*num)]]);  
17.    }  
18.      
19.    @end

此段代码定义了一个固定的字符串输出,方法为 constantsToExport,返回了名称为 hello 的字符串。第二个定义了一个可以供 React Native 的 JavaScript 代码调用的函数,函数功能非常简单,就是将传递过来的 int 参数进行平方计算,计算后将计算的值返回。

函数的定义需要使用宏命令 RCT_EXPORT_METHOD 进行显式地定义。定义的函数都会被异步地调用,所以函数的定义不是直接使用 return 返回一个值,和固定的字符串返回不一样。

squareMe 是定义了此函数的函数名称,参数为一个 NSString 型的值,名称为 number,另一个参数为函数的回调函数,用于获取原生代码的执行结果。

函数的 callback 第一个参数为错误的返回(这里没有错误就返回了一个 null),第二个为计算后的值,供函数回调使用。

11.2.2 iOS 项目编译设置

如上代码都编写完成后,在 Xcode 中执行项目编译,点击 Xcode 中的 Build 命令,如图 11-3 所示。

《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」 图 11-3 Xcode 项目的编译

如果在编译时遇到 fatal error: ‘RCTBridgeModule.h’ file not found 的错误,即 ‘RCTBridgeModule.h 文件找不到的问题,错误如图 11-4 所示。

《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」 图 11-4 RCTBridgeModule.h 文件找不到的错误

解决的方法为在 Xcode 的项目设置“Build Settings”选项卡下找到“Header Search Paths”设置节点,并确认在其中包含了如图 11-5 所示的定义,即添加了 $(SRCROOT)/../node_modules/react-native/React 值的定义并在下拉选项中选择了“recursive”。

《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」 图 11-5 设置 Xcode 的 Search Paths

进行了如上的设置后,再次编译项目即可解决此错误问题。

EOF

转载须以超链接形式标明文章原始出处和作者信息

《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++ Primer 中文版(第 4 版)

C++ Primer 中文版(第 4 版)

Stanley B.Lippman、Josée LaJoie、Barbara E.Moo / 李师贤、蒋爱军、梅晓勇、林瑛 / 人民邮电出版社 / 2006 / 99.00元

本书是久负盛名的C++经典教程,其内容是C++大师Stanley B. Lippman丰富的实践经验和C++标准委员会原负责人Josée Lajoie对C++标准深入理解的完美结合,已经帮助全球无数程序员学会了C++。本版对前一版进行了彻底的修订,内容经过了重新组织,更加入了C++ 先驱Barbara E. Moo在C++教学方面的真知灼见。既显著改善了可读性,又充分体现了C++语言的最新进展和当......一起来看看 《C++ Primer 中文版(第 4 版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具