xiangzhihong8的专栏

概述React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架，可以同时支持iOS和Android两大移动平台。那有人会问，除了可以开发移动跨平台应用，那能不能使用React Native开发桌面客户端应用呢？答案是肯定的。如果有使用React Native开发桌面应用的需求，那么可以参考下微软推出的React Native for Windows + macOS技术。React Native for Windows + macOS是

前言一直以来，在不同平台开发和维护同一款产品，所付出的成本和代价都是一个令人头疼的问题，于是各类跨平台开发方案顺应而生。从Web容器方案到以React Native、Weex为代表的泛Web容器方案，最后再到以Flutter为代表的自绘引擎方案，这些优秀的跨平台开发框架们慢慢抹平了各个平台的差异，使得操作系统的边界变得越来越模糊。最近一年来，随着Google对Flutter推广力度的加大，老牌...

我们每个人可能都会遇到这样的问题：即我们的代码在本地测试时没有问题，但是一上线运行，就会遇到各种奇奇怪怪的线上 Bug。由于本地测试场景并不能全面覆盖，对于这种线上的Bug，最有效的手段就是搭建线上监控系统，然后再进行修改。所以，不管是多么小的系统，线上错误与性能监控是必须具备的能力。通常，从头搭建和迭代一个监控系统的成本是非常高的，如果你也有线上错误和性能的监控需求，但是公司内部又没有现成的监控系统，那我的建议是直接用 Sentry。Sentry译为哨兵，是一个能够实时监控生产环境上的监控系统，一旦线上版

和原生开发相比，React Native 最明显的不足就是页面的渲染速度，比如页面加载慢，渲染的效率低等。对于这些问题，都是开发中常见的问题，也是使用React Native 开发跨平台应用时必须优化的点，由此引入一个问题，React Native的性能优化究竟应该如何做？相信对于这个问题，大多数人第一眼看到后都是很懵逼的。因为大多数人除了业务开发之外，对于React Native原理性的东西都了解甚少。其实，经过我们多年的经验，一个未经优化的 React Native 应用，从大体上讲可以分为 3 个瓶颈

在 React 16 之前，VirtualDOM 的更新过程是采用 Stack 架构实现的，也就是循环递归方式。这种对比方式有一个问题，就是一旦任务开始进行就无法中断，如果应用中组件数量庞大，Virtual DOM 的层级就会比较深。如果主线程被长期占用，就会阻塞渲染，造成卡顿。为了避免这种情况，需要执行更新操作时不能超过16ms，如果超过16ms，就需要先暂停，让给浏览器进行渲染操作，后续再继续执行更新计算。而Fiber架构就是为了支持“可中断渲染”而创建的。在React中，fiber tree是一种数据

触过RN的同学都知道，热更新作为RN最大的特点之一，可以让开发者随时上线新的迭代以及修复线上Bug。在上一篇文章我们聊了一下热更新平台搭建，今天来我们聊聊热更新中的拆包环节。热更新和拆包都是大家聊得比较多的话题，通常一个聊得比较多的技术话题都会有一套成熟的技术方案，比如热更新平台就有 CodePush 这样的成熟方案，但拆包却没有一套大家都公认成熟的方案。不过，市面上支持拆包的方案有react-native-multibundler、携程的moles-packer 还有58同城的metro-code-spl

一、Sentry简介不知道大家有没有遇到这样的情况：我们的代码在本地测试时是没有问题得，不过一在线上运行就遇到各种奇奇怪怪的问题。既然不能完全避免线上的问题，那么就需要尽可能地减少线上问题对用户的影响，因此在进行系统设计时，线上监控系统是必不可少的。但是，从头搭建和一个监控系统的成本非常高，如果你有线上错误和性能的监控需求，但公司内部没有现成的监控系统，那我的建议是直接使用一些开源的监控平台，比如Sentry。Sentry具有有如下优点：开源前后端都支持广泛的语言和框架支持支持 Source

一，什么是热更新所谓热更新，也叫做动态更新，一种类似 Web 的更新方式。相对于 App 的发版更新而言，热更新能及时的修复线上存在的问题，大幅的提升业务迭代效率。我们都知道，互联网业务讲究兵贵神速，如果业务能够通过热更新来快速发版和迭代，这就相当于在产品和用户之间搭建了一座能够随时通行的桥梁，代替了原来好几周才能有一次迭代的问题。那么，热更新和发版更新有什么不同呢？为什么热更新比发版更新快这么多呢？下面是这两种更新方式的原理对比图。发版更新，指的是你把 React Native App，当作 An

一、混合开发App 混合开发，指的是一个 App 部分功能用 Native 构建，其他功能使用跨端框架进行构建，最常见的场景是，Native 作为一个可工程，其实业务开发使用垮端框架进行开发。目前，比较流行的跨端框架有 H5、React Native、Flutter、布局动态化等。而在以 Native 与 React Native 混合开发中，同一个 App 中，混合开发通常有以下几种形态：那究竟有哪些公司在使用 React Native 呢？首先，是一些大型 App 中，比如美团、携程、京东、

1， 背景如果我们打开RN的Android源码，在build.gradle中回看到这样一段代码。 if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImplementation files(hermesPath

作为一款以JavaScript语音为基础跨平台开发框架，React Native本身已经具备了动态更新的能力，不过官方却没有提供一套标准的动态更新方案。因为一个标准的动态更新方案，除了需要客户端具备动态更新的能力外，还需要服务器端支持资源包的管理和下发。虽然官方没有提供标准的热更新方案，但是React Native社区却提供了搭建热更新的私服方案，比如React Native中文网的pushy和微软的CodePush。相比于pushy，我们更推荐使用CodePush来搭建热更新私服。CodePush是微

一、基本使用作为目前流行的移动跨平台开发技术，React Native 提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架。使用React Native开发时，经常会遇到加载H5网页的需求，此时需要用到react-native-webview插件来执行H5网页的加载。使用插件之前，需要先安装npm i react-native-webview插件，命令如下：npm i react-native-webview然后，就可以在业务代码中引入react-native-webview

在React Native开发中，如果要实现弹窗效果，通常的方案是使用官方的Modal组件。不过，官方的Modal组件会有一些缺陷，比如在Android端无法全屏显示，而在iOS端中，当打开一个新的ViewController时会被Modal 组件给覆盖掉等。因此，在React Native应用开发中，为了屏蔽这些兼容性问题，我们可以使用react-native-root-siblings插件提供的RootSiblings组件来实现。事实上，RootSiblings组件是对官方Modal组件的进一步的封装

React提供更优雅的前端代码书写方式和更优的界面更新机制，redux提供了组件和业务分离的解决方案，saga或thunk基于redux提供异步业务实现方案，示意图如下。图中的中间件工作于redux内部，介于action和reducer之间，而saga只是某一种Middleware。saga工作于action和reducer之间。如果按照原始的redux工作流程，当组件中产生一个action后会直接触发reducer修改state；而往往实际中，组件中发生的action后，在进入reducer之前需要

最近，使用0.68.0版本的React Native构建项目后，在运行项目的时候，突然给报了一个Cannot access 'serviceOf': it is internal in 'org.gradle.configurationcache.extensions' 的错误，报错日志如下。e: /Users/avishay/project/node_modules/react-native/packages/react-native-gradle-plugin/build.gradle.kts:9:4

最近，在给React Native 项目打包的时候遇到如下异常提示：Error: Duplicate resources此错误的意思是某些资源文件重复，首先尝试了手动删除重复的资源文件，然后再打包。不过，手动删除比较麻烦，且容易出错，下面推荐另外的一种解决方法。首先，找到工程目录下 【node_modules】 ->【 react-native 】-> 【react.gradle 】文件；其次，在该类的 doFirst 代码块后添加如下代码块。图中涉及的代码如下：

最近，按照官方文档初始化了一个React Native项目，但是在Android端运行的时候，报了如下的一个错误。org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:recordFilesBeforeBundleCommandDebug'.Caused by: org.gradle.process.internal.ExecException: A problem occurred starting p

所谓国际化，指的是产品在设计时需要适应不同区域要求的一种方式，换句话说，国际化要求应用程序在设计时需要考虑运行在不同的国家和地区，能够根据所在的国家和地区进行语言切换。在移动应用开发中，实现国际化的场景通常有以下两种。识别手机系统语言，APP自动加载相应的语言文件；允许用户在APP内手动切换语言，此种情况不需要保证APP语言与手机系统语言一致性。作为一种最基本的软件需求，国际化在软件开发中无处不在，特别是大型的软件开发。在React Native应用开发中，实现国际化需要用到react-nativ

背景今天在运行RN项目的时候，报了如下的一个错误：Required ruby-2.7.4 is not installed。然后我看了下本地的Ruby，发现确实是版本比较老，于是我按照提示进行升级，结果报了如下的一个错误：Failed to connect to raw.githubusercontent.com port 443: Connection refused error:对于这个常见的问题，是因为GitHub的raw.githubusercontent.com域名解析被污染导致的。解决的

onViewableItemsChanged简介FlatList是React Native提供的一个高性能的列表组件，本身具备了列表Item缓存复用的逻辑，并且还支持下拉刷新等功能。在列表开发中，特别是FlatList列表滚动时，需要监听当前那些数据item在可见范围内，这时候就需要用到FlatList的onViewableItemsChanged属性。使用onViewableItemsChanged要与viewabilityConfig绑定使用。onViewableItemsChanged：在可见行

在RN应用开发过程中，集成支付宝和微信支付除了直接使用第三方的插件之，比如：react-native-yunpeng-alipay，我们还可以借助RN提供的NativeModules调用原生模块来实现支付。NativeModules

不知道大家遇到过没有，我们使用诸如Fiddler、Charles进行抓包的时候是正常的，但是当我们将请求的Url链接拷贝到浏览器中进行请求的时候，就会403错误。403错误是我们网络请求中常见的【禁止访问】错误。如下所示，我们在Charles中是正常的，但是在浏览器中或者使用Postman进行访问时就会出现403错误。对于这种403禁止访问的错误，我们一般只需要加上对应的header参数即可。具体需要哪些参数，可以将完整的请求拷贝过来，然后进行头信息分析。通常需要的参数如下：req.add_head

一、背景满帮集团移动团队2018年初开始尝试React Native，经过近三年的发展，目前已经承载了大部分的核心业务场景，涉及16+的业务模块、200+页面，日均PV数据在千万级。核心业务也使用React Native开发后，我们脱离了APP发版的限制，统一使用动态发版。相比于APP发版，动态发版频率提高了很多，一周最低两版，有时一周甚至会发5个版本。2018年上线React Native时，用的是当时比较新的0.51版本。在后续的版本中，Facebook官方引入了诸多新的特性，比如Hooks、Her

目前 React Native 新架构所依赖的 React 18 已经发了 beta 版，React Native 新架构面向生态库和核心开发者的文档也正式发布，React Native 团队成员 Kevin Gozali 也在最近一次访谈中谈到新架构离正式发版还差最后一步延迟初始化，而最后一步工作大约会在 2022 年上半年完成。种种迹象表明，React Native 新架构真的要来了。前面，RN官方宣布：Hermes将成为React Native默认的JS引擎。在文章中，我们简单的介绍了即将发布的新渲

一、

自 2019 年首次发布以来，小巧轻便的 JavaScript 引擎 Hermes 在社区中的名气越来越高，很多的框架也开始支持Hermes。作为 React Native 领域高人气元框架的缔造者，Expo 团队此前公布了对 Hermes 的实验性支持。另外，流行移动数据库 Realm 团队近期也决定为 Hermes 提供 alpha 支持。在本文中，我们希望重点介绍过去两年来在推动 Hermes 成为 React Native 最佳 JavaScript 引擎方面取得的各项激动人心的进展。展望未来，我

Lottie是Airbnb开源的一个面向iOS、Android、React Native的动画库，能加载Adobe After Effects导出的动画，并且能让原生App像使用静态素材一样使用这些动画，完美实现炫酷的动画效果。使用流程上，Lottie动画需要先使用Adobe After Effects做出原动画，然后再使用官方提供的Bodymovin插件把动画导出成Json文件，而这个Json文件就是Lottie需要解析的动画源文件。在React Native项目中使用Lottie动画，需要先安装lo

一、前言7 月 14 日，React Native 核心团队的 Joshua Gross 在 Twitter 说，RN 的新架构已经在 Facebook 内部落地了，并且99%的代码已经开源。其实，早在 2018 年 6 月，Facebook 官方就宣布了大规模重构 React Native 的计划及重构路线图，目的是为了让 React Native 更加轻量化、更适应混合开发，接近甚至达到原生的体验。这次的架构升级对于 React Native 意义重大，按照官方的说法，升级后的RN性能将得到大幅提

今天在开发RN程序的时候，报了一个Too many re-renders. React limits the number of renders to prevent an infinite。刚开始怀疑是页面渲染的内容太多，后来将其他元素都删除，结果还是报这个错误。于是就想到了重复渲染的问题，比如下面的写法就会造成重复渲染：onClick={setTime(false)}需要改成下面的方式：onClick={() => { setTime(false);}}因为上面的代码会造成代

虽然React Native已经不在是当前热门的跨平台技术了，但是还是可以看到很多的公司和个人在用，Flutter有Flutter好，RN呢也有适合自己的地方，至于究竟哪个更好，我们不做过多的比较。最近，我在升级之前的《React Native移动开发实战》一书，书中的项目有城市切换的功能，效果如下图所示。可以看到，这个城市选择页面是很常规的，包含了当前定位城市和城市列表，右侧可以通过SlideBar进行快捷定位，除此之外，此组件还支持搜索功能。首先，我们看一下城市列表，对于这一功能，我们可以使用S

1，自定义路由众所周知，不管是在原生Android还是iOS，它们都有一个默认的路由路由栈管理类。由于React Native官方没有提供路由管理的组件，所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由。Stack.Navigator使用的命名路由，所谓命名路由，指的是路由需要先声明然后才能使用。为了方便管理路由页面，我们会将路由放到一个统一的位置，比如screens包下，如下所示。然后，我们在项目的screens/index.js文件中新建一个

在前端开发中，能够完成数据请求的方式有很多，如Ajax、jQuery ajax、axios和fetch等。不过，随着技术的发展，现在能够看到的基本上也就axios和fetch两种。axios是一个基于Promise的Http网络库，可运行在浏览器端和Node.js中，Vue应用的网络请求基本都是使用它完成的。axios有很多优秀的特性，如支持请求的拦截和响应、取消请求、JSON自动转换、客户端防御XSRF等。使用axios之前，需要先在项目中安装axios插件，安装命令如下。//npm npm in

最近，在运行一个老RN项目的时候，使用Xcode运行的时候报了如下的代码错误：Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an lvalue of type 'NSArray<Class> *__strong'Cannot initialize a parameter of type 'NSArray<Class>

使用React Native开发移动App时，经常会遇到矢量图和自定义字体的开发需求，使用矢量图可以有效的减少包体积的大小。在React Native开发中，可以使用react-native-vector-icons来满足开发需求。一、安装和其他的第三方库一样，使用第三方库之前需要先安装react-native-vector-icons。npm install --save react-native-vector-icons然后，在使用link命令添加原生库链接。react-native lin

首先，我们使用使用命令创建模板项目，创建的命令如下。taro init myApp然后，使用 yarn 或者 npm install安装依赖包，并使用下面的命令编译Taro项目。yarn dev:rn启动后会开启一个监听的进程，如下图。不过，细心的你可能会发现，使用taro init命令初始化的项目是没有原生模块支持的，原来Taro使用了一个壳子工程，首先使用下面的命令下载壳子工程taro-native-shell，如下所示。git clone git@github.com:NervJS/

目前，跨平台技术已经很流行了，在跨平台移动应用开发上，很多的公司在RN和Flutter之间徘徊，我们公司基于自己的技术栈，选用的是 React Naitve 。目前， React Naitve已经发布了0.64.0版本。基于现实原因，我们对RN的引入为模块化引入，而非全项目，关于如何在原生iOS中集成RN，之前的文章也有介绍，下面说一下如何集成最新版本RN。首先，按照中文安装文档的介绍搭建RN的开发环境。然后，我们创建一个空的RN项目，RN项目的默认目录和引用设置。npx react-native i

众所周知，React中数据通信是单向的，即父组件可以通过props向子组件传递数据，而子组件却不能向父组件传递数据。要实现子组件向父组件传递数据的需求，需要父组件提供一个修改数据的方法，当页面越来越多的时候，数据的管理就会变得异常复杂。并且，每次数据的更新都需要调用setState，特别是涉及到跨组件通信的问题就会很麻烦。在React开发中，为了解决跨组件通信的问题，业界开发了一大批状态管理框架，目前比较常用的React状态管理框架有Flux、Redux和Mobx等几个。其中，Flux是Facebook

前不久，Facebook在ChainReact 2019大会上正式推出了新一代JavaScript执行引擎Hermes。Hermes 是一款小巧轻便的 JavaScript 引擎，专门针对在 Android 上运行 React Native 进行了优化。对于许多应用程序，只需启用 Hermes 即可缩短启动时间、减少内存使用量并缩小应用程序大小，此外因为它采用 JavaScript 标准实现，所...

什么是深度链接（Deep Link）深度链接是一项可以让一个App通过一个URL地址打开，之后导航至特定页面或者资源，或者展示特定UI的技术，Deep 的意思是指被打开的页面或者资源并不是App的首页，最常使用到的地方包括但远远不限于 Push Notification、邮件、网页链接等。其实这个技术在很久很久以前就已经存在了，鼠标点击一下 mailto:pantao@parcmg.com 这...

React Native（简称RN）是Facebook于2015年4月开源的移动跨平台开发框架，是Facebook在早先开源的React前端框架在原生移动平台的衍生产物，目前支持iOS和Android两大原生移动平台。目前，经过数百名贡献者数月的努力，React Native 迎来了 0.60 版本的发布。此版本完成了 Android 和 iOS 平台的一些重大迁移，许多问题也得到解决。可访问...