qq_36828822的博客

在使用rn开发时，笔者遇到过这样一个需求：已有的原生页面，需要进行改版，而这个改版比较小，只是加一个ImageView，因为部门有ios的同事，而且当时已经用了rn这门技术。那么，我们如何在一个纯原生的页面中调用rn控件呢？前面几篇文章，我们都是在一个rn的页面中使用rn的控件。这次，笔者就带大家来实现这个功能——在原生页面中调用rn控件。思路很简单：我们在原生新建一个ViewGroup，用这个ViewGroup在承载rn的控件就行了。首先，我们新建一个纯原生的页面。最后，在原生页面中调用即可。

其实，笔者上面提供的案例都是封装view的，并没有封装viewgroup。后面笔者会专门抽出一个章节来讲解如何封装一个瀑布流控件。

JSX语法RN使用JSX语法来构建页面。JSX并不是一门新的开发语言，而是Facebook技术团队提出的一种语法方案，即一种可以在JS代码中使用HTML标签来编写JS对象的语法糖，所以JSX本质上还是JS。在React和RN应用开发中，不一定非要使用JSX，也可以使用JS进行开发。不过，因为JSX在定义上类似HTML这种树型结构，所以使用JSX可以极大地提高阅读和开发效率，减少代码维护的成本。在React开发中，React的核心机制之一就是可以在内存中创建虚拟DOM元素，进而减少对实际DOM的操作从而

组件生命周期详解组件生命周期基础知识组件，又名控件，是一段独立可复用的代码。在React Native应用开发中，组件是页面最基本的组成部分。和React的组件一样，RN的组件也有自己的生命周期。在RN应用开发中，组件的生命周期指组件初始化并挂载到虚拟DOM为起始，到组件从虚拟DOM卸载为终结的整个过程，整个生命周期如图所示。如图可知，rn组件的生命周期大体可以分为3个阶段，即挂载、更新和卸载。其中，挂载和更新阶段都会调用render()方法绘制视图。组件的每个生命周期阶段都提供了一些方法供开发

牢记四步法便可以完成rn与原生模块的通信功能，希望大家多多实践。

首先，babel.config.js是babel转换器的相关配置，因为es2015使用了一些高级语法，babel则是将这些高级语法转换成浏览器引擎能够识别的语法；因为rn端的代码执行的是js代码，而js代码是动态语言，它最令人恶心的一点是：它是不会报错的。而且有趣的一点是，我们使用npx命令初始化一个rn项目的时候，其实也是用yarn来下载相关的依赖的，因为初始化的工程有一个yarn.lock文件，这就是最好的见证。我们还是分两大部门来介绍；具体细节，感兴趣的同学可以查阅相关的资料，我们这里就不介绍了。

最近一年，因为公司业务需要，部门引入了rn这门跨段技术来开发业务需求。从去年部门大佬调研rn这个框架到现在已有超过一年的时间了。而我从当时毕业不到1年的小白成长到现在负责维护项目的Android端代码的主力。同时，自己对rn相关的技术有了不少理解。因此，想要分享一些知识点，希望可以帮助到大家。我会以一个专栏的方式述说在这一年当中使用rn开发需求遇到的困难。大家可以借鉴参考下，共同进步！！！使用rn开发功能的第一步当然是搭建相关的环境了。因为，笔者是开发android出生的。