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推广力度的加大，老牌...

计算属性(computed)是Vue中的一个属性，它是一个函数，根据响应式的数据进行计算返回结果。计算属性可以多次使用，并且当计算属性所依赖的响应式数据改变时会重新计算，避免了不必要的计算。而方法(methods)则需要手动调用，无法自动触发并且不能被缓存，所以当方法所依赖的数据需要更新时需要手动调用。Vuex是Vue的状态管理库，它将组件的共享状态抽取出来，以一个全局单例模式进行管理，使得多个组件可以共享同一状态。

React Native打包是一件比较复杂的事情，相对于原生Android，iOS来讲，首先你可能需要在每次打包之前要重新生成bundlejs文件，否则可能新修改的代码不会生效，其次，在生成jsbundle的过程中可能会生成一些无用的node开头的资源，打包之前需要删除。

本文主要介绍React Native项目接入Sentry流程，以及遇到的一些注意点，方便大家去解决和处理，如果在接入过程中，遇到任何问题可以在评论区留言，我将根据自己的接入经验给出一些解决方案和建议。

最近，在执行pod install命令安装iOS依赖包的时，运行到installing hermes engine 就直接卡住了。执行pod install --verbose 时，看到下载包的大小478M,但是下载速度高达 20kb/s。对于这个问题，查阅了网上的一些资料，以下是一个可行的解决方案。

如果您也是一名长期从事 React Native 工作的开发者，那么就会知道性能不佳一直是 React Native 一个最受开发者诟病的问题。不过可以看到的是，在过去的几个版本中，特别是随着新架构的引入，React Native 的性能问题已经得到了大幅度的提升，相信未来会更好。最后，React Native还没 “死”，很多大厂的跨平台项目都可以看到它的影子，而且我相信它会越来越好。

前面说到了如何启动预构建的问题，现在我们来谈谈怎样通过 Vite 提供的配置项来定制预构建的过程。Vite 将预构建相关的配置项都集中在optimizeDeps属性上，我们来一一拆解这些子配置项背后的含义和应用场景。Vite 提供了esbuildOptions 参数来让我们自定义 Esbuild 本身的配置，常用的方式是加入一些 Esbuild 插件，配置如下。plugins: [// 加入 Esbuild 插件。

最后发现codepush 去的包名是从package.json的name，他会按照这个去找路径下的配置文件，我的包名恰好和项目名不一致，导致了问题。AppDelegate.m的代码如下 (注意：#import 必须在FB_SONARKIT_ENABLED 前面，否则ios archive 会报错)。为了实现RN的更新，我们还需要对RN项目的代码进行修改。接着，创建App在Staging和Production环境的部署key，命令如下。解决办法：更新mac系统到最新，更新xcode版本到最新！

在上一篇文章使用 Vite 初始化了一个 Web 项目，然而能够使用 Vite 官方的脚手架来构建项目是远远不够的，我们还需要考虑诸多的工程化因素，以及和其他第三方插件的融合。接下来，我们将以实战的方式逐个击破Web工程化的各个方面。首先，前端工程化一个离不开的话题便是CSS样式方案。在早期的前端开发中，大家或许都手写过最原生的CSS样式，但是原生 CSS 存在着诸多问题，并且开发效率极低。因此，在现在的前端工程化开发中出现了各种CSS样式方案。

Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite3，Vite全新的插件架构、丝滑的开发体验，可以和Vue3完美结合。总的来说，Vite希望提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可拓展性。不过，相比Vue-cli配置来说，Vite构建的项目还是有很多的配置需要开发者自己进行处理。

从0.71版本开始，我们将React Native的默认开发语言从JavaScript变成TypeScript，在新建的项目的时候会有所体现，与此同时项目根目录会增加一个tsconfig.json文件用于辅助开发者编写语法正确的Ts代码。React Native的prop，如ViewPropTypes和Text.propTypes，在0.66版本中被弃用，如果直接使用它们会输出过时的警告，并且在0.68版本中我们移除了对prop的支持，如果在0.68及以上版本中使用它将会遇到错误。比如设置组件之间间隔为。

目前，最新版本的React Native已经默认开启了Hermes引擎。而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎，启用Hermes引擎可以优化启动时间，减少内存占用以及空间占用。

不过，在 0.70 版本中，我们针对Android环境进行了优化，最终缩小了这一差距，现在可以继续在你的项目中加入带有 yarn add 的库，它们会在任何架构上被正确链接。在之前的版本中，你必须把 Android 的配置放在一个单独的 build.gradle 文件中，现在你可以直接在 package.json 中定义它，比如。同时，开发者还可以通过新的文档，深入了解为什么要提供一个New Architecture 和它的各个部分，因为这能更好的帮助开发者理解新 API 背后的原理。

工欲善其事，必先利其器。搭建React Native开发环境，需要安装以下辅助工具。

创建新项目时，本地已经安装好pod，每次都要提示安装pod，然后又安装失败。避免在unmounted的组件上设置state，否则会报如下的错误。解决方法是，将Gemfile里的版本改成设置提示版本即可。如果本地安装的pod与rn默认的不一致，会报如下的错。解决方法：删除全局的react-native-cli。那么，我们可以在创建项目的时候跳过pod的安装。

相比传统的Stack架构，Fiber 将工作划分为多个工作单元，每个工作单元在执行完成后依据剩余时间决定是否让出控制权给浏览器执行渲染。并且它设置每个工作单元的优先级，暂停、重用和中止工作单元。每个Fiber节点都是fiber tree上的一个节点，通过子、兄弟和返回引用连接，形成一个完整的fiber tree。...

该系统的目标在于满足所有App的多团队研发协作效率问题，去中心化RN发布模型考虑到“独立运行时”、“独立开发”、“独立构建”、“独立发布”四大方面，保障了每个plugin运行的独立性。最终目标在于支撑Shopee的多个RN团队在不同App平台根据自己节奏自由发布且高效运作。系统设计涉及到“多团队权限管控”、“客户端版本控制”、“灰度和回滚”、“增量差分”、“多入口包体积优化”、“一站式多环境融合”，加速了整个研发流程，真正做到了“灵活性”和“稳定性”的兼得。https。...

我们每个人可能都会遇到这样的问题：即我们的代码在本地测试时没有问题，但是一上线运行，就会遇到各种奇奇怪怪的线上 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引擎。在文章中，我们简单的介绍了即将发布的新渲