在 React Native 中给第三方库打补丁的过程解析

 更新时间:2022年08月03日 09:38:49   作者:todoit lv-4  
这篇文章主要介绍了在 React Native 中给第三方库打补丁的过程解析,有时使用了某个React Native 第三方库,可是它有些问题,我们不得不修改它的源码,本文介绍如何修改源码又不会意外丢失修改结果的方法,需要的朋友可以参考下

有时使用了某个React Native 第三方库,可是它有些问题,我们不得不修改它的源码。本文介绍如何修改源码又不会意外丢失修改结果的方法。

我们可能不方便给原作者提 Pull Request,因为他们可能不愿意接受我们的更改。又或者原作者无法及时发布新版本。

种种原因,我们只有去修改 node_modules 目录下的文件。

可是当我们执行 yarn install 或 yarn add 时,原先的修改会丢失。

有没有办法让我们可以在 yarn install 或 yarn add 时,自动把修改的源码加载进来?

patch-package 来拯救!

安装

安装以下两个 package:

yarn add patch-package postinstall-postinstall

大多数时候,当你执行 yarn add 、 yarn remove 或 yarn install 时,Yarn 会用原始的模块完全取代你的 node_modules 的内容。 patch-package 使用 postinstall 钩子按照你的要求来修改这些原始模块。

Yarn 只在 yarn install 和 yarn add 之后运行 postinstall 钩子,但不包括在 yarn remove 之后。postinstall-postinstall 包用来确保你的 postinstall 钩子在 yarn remove 后也能被执行。

配置 scripts ,确保每次执行 yarn install 或者 yarn add 之后,都会自动执行 patch-package :

// package.json
"scripts": {
    "postinstall": "patch-package",
}

使用

首先对你的 node_modules 文件夹中的某个包的文件进行修改,然后运行

yarn patch-package package-name

譬如,我们的项目依赖了 react-native-system-setting 这个包,但是这个包已经不再更新了,而 React Native 的新版本要求每一个发布事件的模块,必须实现以下两个方法:

@ReactMethod
public void addListener(String eventType) {
    // do nothing
}

@ReactMethod
public void removeListeners(int count) {
    // do nothing
}

那么我们可以修改这个包的源码,添加这两个方法,然后运行

yarn patch-package react-native-system-setting

可以看到,在根目录下,创建了一个 patches 文件夹,里面有一个补丁文件,记录了对 react-native-system-setting 的修改。

这样就不怕补丁丢失了。

示例

这里有 一个示例 ,供你参考。

到此这篇关于在 React Native 中给第三方库打补丁的过程解析的文章就介绍到这了,更多相关React Native第三方库打补丁内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解React Native与IOS端之间的交互

    详解React Native与IOS端之间的交互

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。本文将介绍React Native与IOS端之间的交互。
    2021-06-06
  • React之如何在Suspense中优雅地请求数据

    React之如何在Suspense中优雅地请求数据

    Suspense 是 React 中的一个组件,直译过来有悬挂的意思,能够将其包裹的异步组件挂起,直到组件加载完成后再渲染,本文详细介绍了如何在Suspense中请求数据,感兴趣的小伙伴可以参考阅读本文
    2023-04-04
  • React实现父组件调用子组件的两种写法

    React实现父组件调用子组件的两种写法

    react通信分很多种,比如:父子通信,兄弟通信等等,这里我们就简单说一下父子通信,父子通信分为:父组件调用子组件里面的方法;子组件调用子组件里面的方法,这里我们着重说一下父组件调用子组件,需要的朋友可以参考下
    2024-04-04
  • 详细谈谈React中setState是一个宏任务还是微任务

    详细谈谈React中setState是一个宏任务还是微任务

    学过react的人都知道,setState在react里是一个很重要的方法,使用它可以更新我们数据的状态,下面这篇文章主要给大家介绍了关于React中setState是一个宏任务还是微任务的相关资料,需要的朋友可以参考下
    2021-09-09
  • React 无状态组件(Stateless Component) 与高阶组件

    React 无状态组件(Stateless Component) 与高阶组件

    这篇文章主要介绍了React 无状态组件(Stateless Component) 与高阶组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React 实现具备吸顶和吸底功能组件实例

    React 实现具备吸顶和吸底功能组件实例

    这篇文章主要为大家介绍了React 实现具备吸顶和吸底功能组件实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • React组件的三种写法总结

    React组件的三种写法总结

    本文主要总结了React组件的三种写法以及最佳实践,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • react Scheduler 实现示例教程

    react Scheduler 实现示例教程

    这篇文章主要为大家介绍了react Scheduler 实现示例教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • create-react-app构建项目慢的解决方法

    create-react-app构建项目慢的解决方法

    这篇文章主要介绍了create-react-app构建项目慢的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • ReactNative点击事件.bind(this)操作分析

    ReactNative点击事件.bind(this)操作分析

    这篇文章主要为大家介绍了ReactNative点击事件.bind(this)操作分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11

最新评论