在 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中的state的简写方式

    详解react中的state的简写方式

    React是一个状态机主要体现在state上,通过与用户交易实现不同的状态,state是组件的私有属性,是用来初始化的,本文重点给大家介绍react中的state的简写方式,感兴趣的朋友一起看看吧
    2021-08-08
  • react-router6.x路由配置及导航详解

    react-router6.x路由配置及导航详解

    这篇文章主要介绍了react-router6.x路由配置及导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react.js使用webpack搭配环境的入门教程

    react.js使用webpack搭配环境的入门教程

    本文主要介绍了react 使用webpack搭配环境的入门教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • react hooks实现原理解析

    react hooks实现原理解析

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定,节后实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • ES6 class类链式继承,实例化及react super(props)原理详解

    ES6 class类链式继承,实例化及react super(props)原理详解

    这篇文章主要介绍了ES6 class类链式继承,实例化及react super(props)原理,结合实例形式详细分析了ES6 中class类链式继承,实例化及react super(props)原理相关概念、原理、定义与使用技巧,需要的朋友可以参考下
    2020-02-02
  • react项目优化配置的操作详解

    react项目优化配置的操作详解

    这篇文章主要介绍了react项目优化配置,主要包括优化配置CDN,优化路由懒加载,结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • react中使用antd及immutable示例详解

    react中使用antd及immutable示例详解

    这篇文章主要为大家介绍了react中使用antd及immutable示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • react-native之ART绘图方法详解

    react-native之ART绘图方法详解

    本篇文章主要介绍了react-native之ART绘图方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React Fragment介绍与使用详解

    React Fragment介绍与使用详解

    本文主要介绍了React Fragment介绍与使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 原生实现一个react-redux的代码示例

    原生实现一个react-redux的代码示例

    这篇文章主要介绍了原生实现一个react-redux的代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论