㈠ 关于React升级版本后造成白屏
react从16升级到17版本后，npm run start 本地跑的时候散唤迹没有问题，但是一旦build部署上去，就会白屏，然后出现这个报错 点开一看，卡在冲并这里 查阅后得知，react从16升级到17后，相链埋应的react-dom也要升级到17， 输入 npm i [email protected] –save 已解决
㈡ react native gradle怎么升级
更新版本的React Native将会让你访问更多的APIs， 这样我们可以去使用更多的APIs,视图Views，以及开发者工具以及其他一些好用的东西。浏览版本更新日志就会发现整体FB官方开发进度还是非常紧张的，这样就很容易导致旧版本会出现不能用的情况，后期可能会出现不可预料的情况，这边建议大家尽量更新最新正式版本。我们大家都知道一个React Native项目使用Android项目,iOS项目和JavaScript项目三部分进行组成的，而且三者都关联打包在npm包内的，所以该项目版本进行更新是比较繁琐的。下面我来给大家讲解一下React Native项目的升级步骤。一、查看当前版本[plain] view plain <span style="font-family:SimSun;font-size:14px;">[email protected]:~/AwesomeProject$ react-native –version react-native-cli: 0.2.0 react-native: 0.22.2</span> 二、查看最新的版本[plain] view plain <span style="font-family:SimSun;font-size:14px;">[email protected]:~/AwesomeProject$ npm info react-native { name: 'react-native', 'dist-tags': { latest: '0.25.1', next: '0.26.0-rc' }, versions: [ '0.0.0', '0.0.5', … … '0.24.1', '0.25.0-rc', '0.25.1', '0.26.0-rc' ], maintainers: … … dist: { shasum: '', tarball: 'https://registry.npmjs.org/react-native/-/react-native-0.25.1.tgz' }, directories: {} }</span> 三、升级依赖的版本[plain] view plain <span style="font-family:SimSun;font-size:14px;">[email protected]:~/AwesomeProject$ npm install –save [email protected] > [email protected] install /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil > node-gyp rebuild make: Entering directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil/build' CXX(target) Release/obj.target/bufferutil/src/bufferutil.o SOLINK_MODULE(target) Release/obj.target/bufferutil.node COPY Release/bufferutil.node make: Leaving directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil/build' > [email protected] install /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate > node-gyp rebuild make: Entering directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate/build' CXX(target) Release/obj.target/validation/src/validation.o SOLINK_MODULE(target) Release/obj.target/validation.node COPY Release/validation.node make: Leaving directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate/build' > [email protected] postinstall /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/yeoman-generator/node_moles/cross-spawn/node_moles/spawn-sync > node postinstall npm WARN optional dep failed, continuing [email protected] [email protected] node_moles/react-native ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── word[email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], yeoman-welc[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) └── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])</span>
㈢ react18出来了17还要学么
学。react18是在react17的基础上改进而来的，所以react17也要学好，不然如果放弃react17直接学react18，很多机理无法理解。React18预计将会是一次谈坦影响比较大的版本，不仅仅是因为它将会修改已有属性，比如自动基喊批量处理、改进ssr的api支持等，还会正式带来“并发渲染模式”以搏侍野及其周边api如startTransition等。React18作为新的版本框架，如果后续你想要对自己的项目快速进行升级迭代，就需要提前掌握这个新版本。
㈣ React 18 发布、Vue 3、Vitest、Pinia 正式成为 Vue 官方推荐的状态
Pinia 终于转正了，它具有与 Vuex 5 几乎完全相同或者增强的 API，简单来说，它就是和 Vuex 5 名字不同。Vuex 3 和 4 仍会继续维护，但是新功能不太可能会添加了。Pinia 也支持渐进式迁移，Vuex 和 Pinia 可以安装在同一个项目中，新项目的话建议直接使用 Pinia。
Vite 发布了 v2.9.0。
React 18 终于发布了，官方团队从 v16 就开始普及并发概念，到正式版发布时难免少了一些新鲜感。照目前的发展趋势看，React 未来会朝着前端底层“操作系统”的方向发展，会变得越来越复陪笑陪杂。这些复杂的操作又会被元框架(Next.js、Remix)消化掉，开发者并不会直接接触，使用这些元框架开发即可。
稳定不停滞，支持增量升级，v5、v6 的版本代码可以同时存在。
下面是其他的发布信息和 TC39 提案的一些推进情况，大家可以找感兴趣的自行查阅。
下面我们来看技术资料。
和好朋友卡颂一起在做的项目： 前端赏金猎人 。
这是一个用单纯的金钱关系维系的前端学习社区，悬赏答题 + 答题赚钱。
期待你的加入，如果觉得有价值的话，可以给个 Star 鼓励一下。
把技术名词的大小写拼芦蠢写正确是基本的素养，但很多人都不重视，这个项目可以帮助你纠正错误的大小写。
免费的编程中文书籍索引，项目已有 90.1k Star。
从 2008 年谷歌浏览器推出至今的 100 个精彩瞬间回 忆录。
在这里插入图片描述
Pinia 是 Vue.js 的轻量级状态管理库，最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。
Pinia的成功可以归功于其管理存储数据的独特功能（可扩展性、存储模块组织、状态变化分组、多存储创建等）。
另一方面，Vuex也是为Vue框架建立的一个流行的状态管理库，它也是Vue核心团队推荐的状态管理库。 Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与Rex相同的流量架构。
在这篇文章中，我们将对Pinia和Vuex进行比较。我们将分析这两个框架的设置、社区优势和性能。我们还将看一下Vuex 5与Pinea 2相比的新变化。
Pinia 设置
Pinia 很容易上手，因为它只需要安装和创建一个store。
要安装 Pinia，您可以在终端中运行以下命令：
该版本与Vue 3兼容，如果你正在寻找与Vue 2.x兼容的版本，请查看v1分支。
Pinia是一个围绕Vue 3 Composition API的封装器。因此，你不必把它作为一个插件来初始化，除非你需要Vue devtools支持、SSR支持和webpack代码分割升斗的情况：
在上面的片段中，你将Pinia添加到Vue.js项目中，这样你就可以在你的代码中使用Pinia的全局对象。
为了创建一个store，你用一个包含创建一个基本store所需的states、actions和getters的对象来调用 defineStore 方法。
Vuex 也很容易设置，需要安装和创建store。
要安装Vuex，您可以在终端中执行以下命令：
要创建store，你可以使用包含创建基本store所需的states、actions和 getter 的对象调用 createStore 方法：
要访问 Vuex 全局对象，需要在 Vue.js 项目根文件中添加 Vuex，如下所示：
使用 Pinia，可以按如下方式访问该store：
请注意，在访问其属性时省略了 store 的 state 对象。
使用Vuex，可以按如下方式访问store：
这两个状态管理库都相当容易学习，因为它们在 YouTube 和第三方博客上都有很好的文档和学习资源。对于以前有使用 Rex、MobX、Recoil 等 Flux 架构库经验的开发人员来说，他们的学习曲线更容易。
这两个库的文档都很棒，并且以对经验丰富的开发人员和新开发人员都友好的方式编写。
Pinia和Vuex都非常快，在某些情况下，使用Pinia的web应用程序会比使用Vuex更快。这种性能的提升可以归因于Pinia的极轻的重量，Pinia体积约1KB。
尽管Pinia是在Vue devtools的支持下建立的，但由于Vue devtools没有暴露出必要的API，所以一些功能如时间旅行和编辑仍然不被支持。当开发速度和调试对你的项目来说更重要时，这是值得注意的。
Pinia 将这些与 Vuex 3 和 4 进行了比较：
这些是Pinia在其状态管理库和Vuex之间的比较中提出的额外见解：
将 Pinia 2（目前处于 alpha 阶段）与 Vuex 进行比较，我们可以推断出 Pinia 领先于 Vuex 4。
Vue.js核心团队为Vuex 5制定了一个开放的RFC，类似于Pinia使用的RFC。目前，Vuex通过RFC来尽可能多地收集社区的反馈。希望Vuex 5的稳定版本能够超越Pinea 2。
据同时也是 Vue.js 核心团队成员并积极参与 Vuex 设计的 Pinia 的创建者（Eardo San Martin Morote）所说，Pania 和 Vuex 的相似之处多于不同之处：
尽管 Pinia 足以取代 Vuex，但取代 Vuex 并不是它的目标，因此 Vuex 仍然是 Vue.js 应用程序的推荐状态管理库。
根据我的个人经验，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。
将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。
批处理是 React将多个状态更新分组到单个重新渲染中以获得更好的性能。
例如，如果你在同一个点击事件中有两个状态更新，React 总是将它们分批处理到一个重新渲染中。如果你运行下面的代码，你会看到每次点击时，React 只执行一次渲染，尽管你设置了两次状态：
这对性能非常有用，因为它避免了不必要的重新渲染。它还可以防止你的组件呈现仅更新一个状态变量的“半完成”状态，这可能会导致错误。
这可能会让你想起餐厅服务员在你选择第一道菜时不会跑到厨房，而是等你完成订单。
然而，React 的批量更新时间并不一致。例如，如果你需要获取数据，然后更新handleClick上面的状态，那么 React不会批量更新，而是执行两次独立的更新。
这是因为 React 过去只在浏览器事件（如点击）期间批量更新，但这里我们在事件已经被处理（在 fetch 回调中）之后更新状态：
在 React 18 之前，我们只在 React 事件处理程序期间批量更新。默认情况下，React 中不会对 promise、setTimeout、本机事件处理程序或任何其他事件中的更新进行批处理。
从 React 18 开始createRoot，所有更新都将自动批处理，无论它们来自何处。
这意味着超时、承诺、本机事件处理程序或任何其他事件内的更新将以与 React 事件内的更新相同的方式进行批处理。
我们希望这会导致更少的渲染工作，从而在你的应用程序中获得更好的性能：
注意：作为采用 React 18 的一部分，预计你将升级到createRoot。旧行为的render存在只是为了更容易地对两个版本进行生产实验。
无论更新发生在何处，React 都会自动批量更新，因此：
行为与此相同：
通常，批处理是安全的，但某些代码可能依赖于在状态更改后立即从 DOM 中读取某些内容。对于这些用例，你可以使用ReactDOM.flushSync()选择退出批处理：
2、Suspense 的 SSR 支持
这基本上是服务器端渲染 (SSR) 逻辑的扩展。在典型的 React SSR 应用程序中，会发生以下步骤：
典型 SSR 应用程序的问题在于，在下一步可以开始之前，必须立即完成整个应用程序的每个步骤。这会使您的应用程序在初始加载时变慢且无响应。
React 18 正试图解决这个问题。 组件已经以这样的方式进行了革命性的改变，它将应用程序分解为更小的独立单元，这些单元经过提到的每个步骤。这样一旦用户看到内容，它就会变成互动的。
我们将状态更新分为两类：
单击、悬停、滚动或打字等紧急更新需要立即响应以匹配我们对物理对象行为方式的直觉。否则他们会觉得“错了”。
然而，转换是不同的，因为用户不希望在屏幕上看到每个中间值。
例如，当您在下拉列表中选择过滤器时，您希望过滤器按钮本身在您单击时立即响应。但是，实际结果可能会单独转换。
一个小的延迟是难以察觉的，而且通常是预料之中的。如果在结果渲染完成之前再次更改过滤器，您只关心看到最新的结果。
在典型的 React 应用程序中，大多数更新在概念上都是过渡更新。但出于向后兼容性的原因，过渡是可选的。
默认情况下，React 18 仍然将更新处理为紧急更新，您可以通过将更新包装到startTransition.
构建流畅且响应迅速的应用程序并不总是那么容易。有时，诸如单击按钮或输入输入之类的小动作可能会导致屏幕上发生很多事情。这可能会导致页面在所有工作完成时冻结或挂起。
例如，考虑在过滤数据列表的输入字段中键入。您需要将字段的值存储在 state 中，以便您可以过滤数据并控制该输入字段的值。您的代码可能如下所示：
在这里，每当用户键入一个字符时，我们都会更新输入值并使用新值来搜索列表并显示结果。
对于大屏幕更新，这可能会导致页面在呈现所有内容时出现延迟，从而使打字或其他交互感觉缓慢且无响应。
即使列表不是太长，列表项本身也可能很复杂并且每次击键时都不同，并且可能没有明确的方法来优化它们的呈现。
从概念上讲，问题在于需要进行两种不同的更新。第一个更新是紧急更新，用于更改输入字段的值，以及可能会更改其周围的一些 UI。
第二个是显示搜索结果的不太紧急的更新。
用户希望第一次更新是即时的，因为这些交互的本机浏览器处理速度很快。但是第二次更新可能会有点延迟。
用户不希望它立即完成，这很好，因为可能有很多工作要做。（实际上，开发人员经常使用去抖动等技术人为地延迟此类更新。）
在 React 18 之前，所有更新都被紧急渲染。
这意味着上面的两个状态仍然会同时呈现，并且仍然会阻止用户看到他们交互的反馈，直到一切都呈现出来。我们缺少的是一种告诉 React 哪些更新是紧急的，哪些不是的方法。
新startTransitionAPI 通过让您能够将更新标记为“转换”来解决此问题：
包装在其中的更新startTransition被视为非紧急处理，如果出现更紧急的更新（如点击或按键），则会中断。
如果用户中断转换（例如，连续输入多个字符），React 将抛出未完成的陈旧渲染工作，仅渲染最新更新。
Transitions 可让您保持大多数交互敏捷，即使它们导致显着的 UI 更改。它们还可以让您避免浪费时间渲染不再相关的内容。
上述问题的一个常见解决方案是将第二次更新包装在 setTimeout 中：
这将延迟第二次更新，直到呈现第一次更新之后。节流和去抖动是这种技术的常见变体。
一个重要的区别是startTransition不安排在以后喜欢的setTimeout是。它立即执行。传递给的函数startTransition同步运行，但其中的任何更新都标记为“转换”。
React 将在稍后处理更新时使用此信息来决定如何呈现更新。这意味着我们比在超时中包装更新更早地开始呈现更新。
在快速设备上，两次更新之间的延迟非常小。在较慢的设备上，延迟会更大，但 UI 会保持响应。
另一个重要的区别是 a 内的大屏幕更新setTimeout仍然会锁定页面，只是在超时之后。
如果用户在超时触发时仍在键入或与页面交互，他们仍将被阻止与页面交互。但是标记为 的状态更新startTransition是可中断的，因此它们不会锁定页面。
它们让浏览器在呈现不同组件之间的小间隙中处理事件。
如果用户输入发生变化，React 将不必继续渲染用户不再感兴趣的内容。
最后，因为setTimeout只是延迟更新，显示加载指示器需要编写异步代码，这通常很脆弱。
通过转换，React 可以为您跟踪挂起状态，根据转换的当前状态更新它，并让您能够在用户等待时显示加载反馈。
您可以使用startTransition来包装要移动到后台的任何更新。通常，这些类型的更新分为两类：
总结
React 18 没有任何重大更改，因此，我们将当前的存储库升级到最新版本几乎不需要更改代码，但我们可以享受它们很酷的功能。
㈤ React Fiber
随着 React 16 的发布，Hooks 的正式上线，很多小伙伴都很兴奋，都想要尝试这一新的特性，升级 React 的意愿越来越强烈了。
我们都知道 React 是一个优秀的前端框架，很多的大型应用都在使用，而作为使用 React 为工具的开发者也应谨明该了解下 React Fiber，Fiber 到底是什么？它能给我们带来什么？以及 React 团队为什么要去重写 Fiber 架构？
React Fiber 是 React 16 中新的协调引擎，是对核心算法的一次重新实现。
在 React 16 以前，当元素较多，需要频繁刷新的时候页面会出现卡顿，究其原因是因为更新过程是同步的，大量的同步计算任务阻塞了碧桐浏览器的渲染。
当页面加载或者更新时，React 会去计算和比对 Virtual DOM，最后绘制页面，整个过程是同步进行的。当 JavaScript 在浏览器的主线程上长期运行，就会阻塞了样式计算、布局和绘制，导致页面无法得到及时的更新和响应。此时，无论用户如何点击鼠标或者敲击键盘都不会得到响应，当 React 更新完成后刚刚点击或敲击的事件才会得到响应。
由于 JavaScript 是单线程的特点，所以一个线程执行完成后才会执行下一个线程，当上一个线程任务耗时太长，程序就会对其他输入不作出响应。
React 的更新过程会先计算，一旦任务开始进行，就无法中断， js 将一直祥慧告占用主线程， 直到整棵 Virtual DOM 树计算完成之后，才能把执行权交给渲染引擎，而 React Fiber 就是要改变现状。
接下来，让我们具体来了解下 Fiber。
Fiber 把耗时长的任务拆分成很多的小片，每个小片的运行时间很短，每次只执行一个小片，执行完后看是否还有剩余时间，如果有就继续执行下个小片，如果没有就挂起当前任务，将控制权交给 React 负责任务协调的模块，看有没有其他紧急任务要做，如果没有就继续更新当前任务，如果有紧急任务就去做紧急任务，等主线程不忙的时候在继续执行当前任务。
这样唯一的线程不会被独占，其他任务依然有运行的机会。
这种策略叫做 Cooperative Scheling（合作式调度），操作系统常用任务调度策略之一。
总而言之，我们了解到，Fiber 是一个最小工作单元，也是堆栈的重新实现，可以理解为是一个虚拟的堆栈帧。它将可中断的任务拆分成多个任务，通过优先级来自由调度子任务，分段更新，从而将之前的同步渲染改为异步渲染。
维护每一个分片的数据结构，就是 Fiber，它可以用 JS 对象来表示，其中包含有关组件，以及输入和输出的信息：
上面讲到了任务的执行是根据优先级来调度的，那我们现在具体了解一下优先级。
Fiber Reconciler 决定了当任务调度完成之后，如何去执行每个任务，如何去更新每一个节点的过程。
React Fiber 更新过程分为两个阶段
首次渲染之后 React 会得到一个 Fiber 树，也就是 Current tree（当前树）。当处理更新的时候，React 会构建 WorkInProgress Tree（工作过程树），当构造完成后会将 current 指针指向 WorkInProgress Tree，WorkInProgress Tree 成了新的 Fiber tree。
这被称做双缓冲。以 Fiber tree 为主，WorkInProgress Tree 为辅。
双缓冲技术可以复用内部对象（fiber），节省内存分配、GC的时间开销。
本篇文章篇幅有限，大致讲了 Fiber 的相关知识和 React 的工作流程，对于细节，比如：如何调度任务，如何 diff 等，感兴趣的同学可以自行结合源码研究分析。
㈥ RN错误总结
1.invariant violation:expected a component class,got[object object] 创建自定义组件首字母要大写，否则会报错. 2.Mole 0 is not a registered callable mole. 将gradle升级成最新版本( cd Android 进入android目录执行: sudo ./gradlew clean ) 或者通过android studio工具升级. 3.android.view.WindowManager$BadTokenException: Unable to add window — token null is not valid; is your activity running? 该错误属于安卓Native的错误，如果引用的Activity不存在或者已经销毁，再次引用就会报该错误，如果是react native 调用原生控件的话，创建控件需要引用：getCurrentActivity() 4.android.app.Application cannot be cast to com.facebook.react.ReactApplication 需要将创建的MainApplication在AndroidManifest.xml配迅者置好. 5.Element type is invalid: expected a string (for built-in components) or a class/function but got: object 发生原生一般是你引用了无效的组件，如果组件确实正确，看下引用的组件是否正常导出：（export defalut） 6.react native undefined is not an object (evaluating this…. 发生该错误的一般是忘记bind(this),只要回调函数中需要用到this的，一般都需要bind. 7.react native – expected a component class, got [object Object] 该错误可能是你引用了小写的组件，组件首字母一定要大写，比如<image>应该写成<Image> 8.通过网络获取的图片,设置其resizeMode一定要设置高度和宽度 9,CMD+R刷新无效 release模式下,调试无效亩启薯,在路径、变量名旁厅、文件名等地方不要使用中文，例如图片名，设置为中文的话调试时候是不显示的 或者是没有设置键盘输入:
㈦ ReactNative(二)RN拆包，patch补丁，diff差异文件升级方案
这里对第敏凯谈三种 Patch补丁方案进行深入的探讨和记录 warning:以下拆包针对rn打出孙物的bundle包，和上一次讨论的npm拆模块不一样桥碰。
㈧ react-native-tab-view的两个问题记录
最近在使用 react-native-tab-view 时发现了两个问题。
1.安卓上手势冲突
问题描核虚述：如上图，红框banner区域的滑动会和整个页面（作为Tab中的一项）的滑动冲突，在安卓上表现出的现象就是大概率滑动banner触发的都是页面的滑动。
预期：滑动banner不触发页面的滑动，非banner区域触发。
问题原因：组件内部的Pager控制手势用的是 react-native-gesture-handler 中的PanGestureHandler，banner用的是 @react-native-community/viewpager ，猜测就是这两个库的手势冲突了
解决方案：因为 RN 没法处理手势优先级，思路就是如果两者底层都是用一个Pager是不是就没这个问题。于是将 react-native-tab-view 的Pager替换成 @react-native-community/viewpager ，果然问题就解决了。
PS: 这里要注意 react-native-tab-view 在2.10版本以上支持自定义Pager,可以用官方readme中推荐的 react-native-tab-view-viewpager-adapter ；如果是小于2.10版本，又不好升级（因为2.10开始要升 react-native-reanimated ，而它又牵涉到Android X，需要 RN 60+的支持），这个时候就只能改源码了。
PPS:由于替换成了viewPager，还解决了一级页面需要套一层 gestureHandlerRootHOC 的问题，gestureHandlerRootHOC 导致的crash问题也就自然解决了。
2.低端机上 Tab 定位慢的问题
问题描述：如上图，左右分别是before和after,在前氏竖低端机上我们发现tab切过去后，tab栏的定位以及内容的展示要好几秒才完成。
预期：滑动后立即响应
问题原因：这个问题通过对源码的调试发现，居然是tabitem上切换时文字动画拖累的，所有其它的动画都要等这个动画完成才执行，具体为什么这个动画如此慢，还需要继续研究。大概就是下面这样一段动画处理：
解决方案：我们在低端机或者全平台去掉这个动画即可
最后，如果大家觉得 react-native-tab-view 真的很坑，向大家推荐我司同学自己封装的一个tab库慧大： https://github.com/smadey/react-native-tabify ，上述问题都不存在。
㈨ react提示校验失败
react提示校腔亏验失败的解决方法有：1、升级到最新版。2、彻底卸伍核神载原来的版本再氏告重新安装。3、可能是系统问题。
㈩ Taro 从1.2.26升级到3.4.8，遇到的坑
先全局升级taro到最新版本3.4.8 【1】然后本地init一个项目包，myapp 【2】把之前1.2.26的项目中的src文件夹，替换到myapp中 【3】在myapp中，安装 [email protected] 版本 【4】删掉全局中，所有的 ，import '@tarojs/async-await' 【5】之前引入taro，component的方式，全局都要替换 import Taro, { Component } from '@tarojs/taro' 替换陆哪为以下： import Taro from '@tarojs/taro'import React, { Component } from "react"; 【6】 安装rex npm install rex react-rex rex-thunk rex-logger 把app.ts 中， Provider的引入，换成react-rex import { Provider } from 'react-rex' 全局pages和自定义组件中，connect的引入，换成react-rex import { connect } from 'react-rex'; 【7】引入自定义组件的方式，去掉{} import { XxxxxXxxx } from '../../component/xxxxxx' 替换为 import XxxxxXxxx from '../../component/xxxxxx' 【8】所有文件中，config的部分，都摘出去，放在同一目录下的config.js文件中改为后的app.tsx是这样早散码的import React, { Component } from 'react' import { Provider } from 'react-rex' import configStore from './store' import './app.scss' const store = configStore(); class App extends Component { render() { <Provider store={store} > {this.props.children} </Provider> } } export default App 然后运行试试。 ps：我这边运行的时候不报错了，但是微信开发者工具，显示有问题。 参考链接：掘扮http://t.zoukankan.com/Nyan-Workflow-FC-p-13529088.html
