ReactNative开发实用指南

　　【CSDN编者按】本文主要介绍ReactNative的实际使用经验，对于想要快速入门的同学是有帮助的。
　　作者佐玉
　　出品CSDN（ID：CSDNnews）
　　整体介绍
　　首先说，ReactNative用来做什么？传统的开发中，按照平台划分为iOS，Android，Windows和Mac。其中，随着移动设备的使用移动端应用的开发也越来越多。传统上iOS应用使用Xcode工具、ObjectiveC和Swift语言进行开发，Android应用使用AndroidStudio工具、Java和kotlin语言进行开发。随着开发的普及和应用的成熟度，就有人希望能够用统一的的技术完成更多平台的开发，降低开发成本，提升开发效率，在这样的情况下，2015年ReactNative诞生了。
　　ReactNative这个技术主要解决了多个平台的开发成本和效率问题，只需要掌握前端技术的同学了解一些的iOS和Android的知识就可以实现跨平台的应用开发（为了的方便，我们将用原生或者Native开发代替iOS和Android开发进行叙述）。随着使用的增加和技术的深入，尤其对性能优化都需要对原生部分有深刻的了解，有些项目还需要编写原生代码实现，所以，ReactNative的开发并没有官方说的那么容易和美好。ReactNative的开发技术上要求比原生更高，需要的技术是前端技术原生技术。
　　Flutter也是一门跨平台解决方案，但是和ReactNative不同的是，它是一个全新的技术，包括使用的语言都是全新的Dart语言，技术层面采用了三棵树的模式，底层渲染直接和C交互，而ReactNative中间层原来采用bridge，现在使用Fabric等技术提升效率和性能，总体上来说，都是同范畴的技术，项目选型之初看个人喜欢和团队配置，技术本身都是大公司支持，不需要担心资源和维护问题。从两者的标星量上看，目前Flutter以145K领先一大截。
　　开发环境
　　任何技术的入门都离不开环境的配置，记得当初配置一套后端开发环境都要好多繁琐的步骤，现在前端的开发环境配置也不太轻松，尤其当今处理器架构都出现了跨平台现象，ARM架构处理器可以运行桌面系统，模拟器可以是x86架构，也可以是ARM架构，对于应用来说，可能为了应付这些情况，需要同时包含多套架构的二进制可执行程序和依赖库。对于开发者，可能需要模拟多种环境来开发调试发布程序，来保证使用者的体验。所以，配置环境的这门技术在我看来也算是技术中的灰色地带了。
　　当你作为一个新人，打开ReactNative官网，想要从getstarted开始，以为一切都很美好，那么，可能是一个hello程序都弄半天才跑起来，原因就是开发环境并不像它们介绍的那么简单，实际上这是一个综合性的技术能力，比如，一个对系统有深入了解的，对软件开发有很多研究的人，一个对系统没有什么了解，基础的bash命令和其他工具都没有用过多少人来说，配置环境的难易程序是完全不同的了。
　　ReactNative的开发环境，不仅仅需要安装官网的介绍（〔中文官网环境搭建〕（https：reactnative。cndocsenvironmentsetup）），还需要更多，这里就进行一一介绍。
　　以MacOS开发环境为例，需要安装Nodejs（JavaScript语言运行的必要环境），watchman（程序调试必要组件，检查文件改动状态）。还需要哪些工具呢，让我们从创建一个helloApp应用开始。
　　创建应用helloApp应用，需要执行命令npxreactnativeinithelloApp。里面用到了npx和ReactNative，npx是npmrun的缩略，所以，需要安装npm，而npm集成在了nodejs工具集所以不需要单独安装，reactnative是npm包，一般会自动安装不需要管理，安装Nodejs的方式主要有两种，第一种官网下载安装，第二种（推荐）brewinstallnode，因为brew是MacOS非常常用的工具管理器，很多工具都是通过该工具安装，brew安装的工具维护和管理起来非常方便，而且后续，其它的工具可能没有官网下载安装方式。而brew安装也是需要手动的，全新MacOS并没有该工具，而在中国大陆，安装brew还是有些麻烦，如果你使用的是最新苹果m1或者m2芯片的设备，那么可能需要考虑ARM架构运行x86程序的问题。所以，你看说到这里，开发环境的配置并没有想象中的轻松。有些是对工具需要了解和熟悉，有些需要对系统工具的熟悉，有些对场景的考虑，如果是新人这些问题在所难免，所以为了更加高效的安装请像下面这样的执行。
　　首先，建议电脑系统保证最新，或者保证电脑系统软件组件是同一个时期的产品，尽量减少兼容性问题。
　　其次，确定是x86还是ARM架构芯片，如果是ARM架构，需要在了解rosetta模式和arch命令
　　安装工具的工具brew，如果是中国大陆，〔请参考〕（https：gitee。comcunkaiHomebrewCN），如果网络足够好，可以尝试官网直接安装〔brew官网〕（https：brew。sh）。
　　如果已经安装了brew检查版本，如果太过老旧请下载重新安装，如果在一定范围内可以考虑更新。
　　到这里前提的开发环境准备才算是走上正轨。
　　下面就是使用brew安装Nodejs，watchman，cocoapods，如果是ARM架构设备还需要更新ruby。ReactNative一般进行项目依赖管理使用yarn工具，请使用npminstallgyarn安装。实际开发工具还有VisualStudioCode或者webstorm，如果是VSCode需要安装对应的插件。
　　以上这些是开发前端的开发调试配置。
　　对于开发iOS需要安装Xcode以及对应命令行工具。Xcode13大概15GB左右。
　　对于开发Android需要安装AndroidStudio以及adb工具，还需要配置环境变量。里面自带的jdk如果不满足需求可以自行安装，oraclejdk和openjdk的差别不大，一个商业收费一个开源免费。AndroidStudio安装包本身不大1GB左右，但是后续下载的ndk很大，一个版本就45GB。
　　最后，由于最新ReactNative版本已经是0。69。0，对应React版本18。0。0，它们和之前的版本兼容性很大，建议使用稳定长期的TLS版本，如果最新版本中遇到问题请参考他们的issues。
　　项目运行建议使用yarn工具，实际上，很多人习惯于npm进行依赖，但是，从性能还是ReactNative都建议使用yarn，具体npm和yarn可以自行查阅。
　　创建项目
　　可能有人会觉得，这个就没有必要介绍了吧，这样想的人可以问自己几个问题：
　　如何创建支持TypeScript？
　　如何指定在创建时指定ReactNative的版本？
　　如何创建module项目给别人用？
　　如何创建支持Windows或者MacOS平台的应用？
　　集成ReactNative到现有原生应用？
　　以上这些问题不难就是有些零碎，需要去查找，如果恰好有你关注的问题那就看完这个章节吧，如果没有则跳过。
　　创建支持TypeScript的项目：
　　npxreactnativeinitAwesomeTSProjecttemplatereactnativetemplatetypescript
　　创建指定版本的项目：
　　npxreactnativeinitAwesomeProjectversionX。XX。X
　　创建module的项目个其他应用使用：
　　npxcreatereactnativelibrarylatestreactnativeawesomelibrary
　　创建windows项目：
　　npxreactnativeinittemplatereactnative0。70。0cdprojectNamenpxreactnativewindowsinitoverwrite
　　集成到现有原生项目：〔参考这里〕（https：reactnative。cndocsintegrationwithexistingapps）
　　iOS部分
　　需要使用podinstall生成。xcworkspace文件，Xcode打开这个文件进行原生部分的编译、调试和运行。
　　Android部分
　　需要使用Androidstudio打开Android文件夹进行原生部分的编译、调试和运行。
　　原生部分介绍
　　ReactNative这个技术框架，不仅仅有前端开发和实现，原生部分也是必不可少的，只是有时候不需要手动实现被忽略了而已，举个典型应用场景，我们需要写一个插件给ReactNative应用使用，而插件本身依赖其他原生插件。这时候，我们需要编写原生代码来桥接原生插件。
　　前端部分可以使用vscode开发和调试，原生部分的开发和调试需要使用Xcode和AndroidStudio。
　　实际上，在ReactNative运行之前，Web部分使用metro工具将javascript代码打包成成bundle文件，在原生运行开始的时候，加载并读取文件，在调试模式下，还需要启动javascript引擎运行javascript程序，这个程序就是通过yarnstart运行的调试服务，在release模式下，不需要运行该服务。
　　例如：iOS的加载资源文件源码：
　　（NSURL）sourceURLForBridge：（RCTBridge）bridge｛ifDEBUGreturn〔〔RCTBundleURLProvidersharedSettings〕jsBundleURLForBundleRoot：indexfallbackResource：nil〕；elsereturn〔〔NSBundlemainBundle〕URLForResource：mainwithExtension：jsbundle〕；endif｝
　　开发原生需要注意的以下几个方面内容。这是让程序正常运转的关键点。
　　Web部分
　　对于Web部分需要调用和接收原生的数据，主要的对象包括：
　　NativeModules是原生的句柄，想要调用原生的对象和方法需要用到。例如，原生提供方法callMethod，则使用NativeModules。callMethod调用。
　　NativeEventEmitter是原生的事件订阅对象，想要接收原生的消息和数据需要用到。
　　例如：
　　NativeModuleApi原生对象名import｛NativeEventEmitter，NativeModules｝constNativeModuleApiNativeModules。NativeModuleApi？NativeModules。NativeModuleApi：throwGconsteventEmitternewNativeEventEmitter（NativeModuleApi）；
　　iOS部分
　　对于iOS部分需要接收和发送数据给web，主要的对象包括：
　　接收来自web的调用，需要满足：
　　需要实现模块，调用RCTEXPORTMODULE（NativeModuleApi）
　　需要实现具体方法，实现
　　RCTEXPORTMETHOD（callMethod：（NSString）methodName：（NSDictionary）params：（RCTPromiseResolveBlock）resolve：（RCTPromiseRejectBlock）reject）｛｝
　　需要实现执行的事件，不然无法正常接收消息
　　（NSArray）supportedEvents｛｝
　　发送数据给web，需要满足：
　　实现事件发送类
　　importimportimportinterfaceNativeModuleApi：RCTEventEmitterend
　　调用RCTEventEmitter的方法（void）sendEventWithName：（NSString）eventNamebody：（id）body发送数据。
　　Android部分
　　对于Android部分需要接收和发送数据给web，主要的对象包括：
　　接收来自web的调用，需要满足：
　　实现ReactContextBaseJavaModule消息接收类
　　ReactModule（nameNativeModuleApi。NAME）publicclassNativeModuleApiextendsReactContextBaseJavaModuleimplementsExtSdkApi｛publicstaticfinalStringNAMENativeModuleApublicvoidinitialize｛｝publicvoidinvalidate｛｝publicvoidcallMethod（StringmethodType，ReadableMapparams，Promisepromise）｛｝｝
　　发送数据给web，需要满足：
　　保存数据发送对象
　　privateDeviceEventManagerModule。RCTDeviceEventEmittereventEmitterreactContext。getJSModule（DeviceEventManagerModule。RCTDeviceEventEmitter。class）；
　　使用RCTDeviceEventEmitter发送数据
　　eventEmitter。emit（eventName，data）；
　　开发调试部分
　　在开发和调试模式下，需要额外运行服务来保证JavaScript和原生的混合使用。具体运行服务器命令reactnativestart，如果需要运行多台设备而不相互干扰，可以添加参数port｛102465536｝。对于Android设备还需要设置数据转发，都2022年了，99以上的Android手机都是5。0版本以上，所以，需要设置一下数据转发adbreversetcp：8081tcp：8081，同样可以设置不同端口转发数据，典型应用同时调试多台设备。对于HarmonyOS系统，2。0以及之前的版本可以和Android系统兼容，最新3。0系统并不兼容，具体可以看最新的参考资料。
　　调试UI部分
　　可以使用工具reactdevtools，通过命令npminstallgreactdevtools安装。
　　调试如图：
　　调试源码部分
　　可以使用VSCode直接调试，或者使用浏览器调试。
　　使用VSCode调试，需要安装必要插件：ReactNativeTools。对于格式化可以安装prettier插件。
　　以iOS为例，可以通过命令reactnativerunios从终端启动，也可以通过打开iOS文件夹下的工作空间文件使用xcode工具启动，启动之后，通过vscode附加进程实现，如果是使用浏览器调试，可以在终端输入d或摇晃手机，弹出debug调试界面选择浏览器调试。
　　通过VSCode调试有点麻烦，需要先进行配置launch。json
　　｛
　　version：0。2。0，
　　configurations：〔
　　｛
　　name：Attachtopackager，
　　request：attach，
　　type：reactnative，
　　cwd：｛workspaceFolder｝example
　　｝
　　〕
　　｝
　　VSCode附加进行配置如图：
　　VSCode调试过程如图：
　　真机或者模拟器调试模式如图：
　　浏览器调试如图：
　　启动服务如图：
　　注意：执行调试的时候的根目录很重要，如果不在根目录可能需要手动设置，比较麻烦。
　　测试和验证
　　创建项目的时候会提供tests文件夹，里面的文件可以编写测试代码。示例代码如下：
　　test（givenemptyGroceryShoppingList，usercanaddanitemtoit，｛const｛getByPlaceholder，getByText，getAllByText｝render（）；fireEvent。changeText（getByPlaceholder（Entergroceryitem），banana）；fireEvent。press（getByText（Addtheitemtolist））；constbananaElementsgetAllByText（banana）；expect（bananaElements）。toHaveLength（1）；expectbananatobeonthelist｝）；
　　注意：关于带有原生代码进行单元测试，目前还有问题，启动提示没有加载动态库，这个知道的同学可以留言给我。
　　最后
　　任何炫酷的技术背后，都是扎实的基础，希望同学们在这篇实用指南中或多或少的有所收获。
　　后续有时间再讲述界面渲染、推送相关、打电话相关，性能优化等实用技巧。也欢迎各位点评指正。
　　作者介绍：
　　佐玉，85后，环信研发工程师，从事即时通讯行业十年以上，负责过多个中大型项目Windows、Mac、iOS、Android等平台的客户端研发，技术从底层协议、业务逻辑到界面设计都全程参与。目前主要从事跨平台的技术研发工作，对ReactNative、Flutter技术都有广泛的理解和实践。