在 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第三方库打补丁内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React Native 启动流程详细解析

    导读:本文以 react-native-cli 创建的示例工程(安卓部分)为例,分析 React Native 的启动流程. 工程创建步骤可以参考官网.本文所分析 React Native 版本为 v0.64.2. 我们知道上述工程是一个安卓应用,打开 android/ 目录下源码文件,首先发现它创建了两个 java 文件:MainApplication.java 和 MainActivity.java,分别做了应用以及主 Activity 的定义. 安卓应用的启动流程是:在启动第一个 acti

  • React Native采用Hermes热更新打包方案详解

    React Native采用Hermes热更新打包方案详解

    目录 1, 背景 2,热更新传统方案 3,使用Hermes打包 1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码. if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImple

  • React Native 加载H5页面的实现方法

    目录 一.基本使用 1.1 RN向H5发送数据 1.2 H5向RN传递数据 1.3 双向传值 二.属性和方法 2.1 属性 2.2 方法 三.使用示例 3.1 加载外源网页信息 3.2 登陆场景 3.3 功能模块嵌入到 RN 中 3.4 完整示例 一.基本使用 作为目前流行的移动跨平台开发技术,React Native 提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架.使用React Native开发时,经常会遇到加载H5网页的需求,此时需要用到react-native-w

  • react native之ScrollView下拉刷新效果

    react native之ScrollView下拉刷新效果

    本文实例为大家分享了react native之ScrollView下拉刷新效果的具体代码,供大家参考,具体内容如下 ScrollView的refreshControl属性用于下拉刷新,只能用于垂直视图,即horizontal不能为true. 1.创建自定义CKRefresh.js刷新组件 import React,{Component} from 'react'; import { View, Text, StyleSheet, ScrollView, RefreshControl, Dimen

  • React Native项目中使用Lottie动画的方法

    React Native项目中使用Lottie动画的方法

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

  • React Native JSI实现RN与原生通信的示例代码

    React Native JSI实现RN与原生通信的示例代码

    目录 什么是JSI JSI有什么不同 在iOS中使用JSI iOS端配置 RN端配置 js调用带参数的原生方法 原生调用JS 原生调用带参数的JS方法 在原生端调用js的函数参数 总结 问题 参考资料 什么是JSI React Native JSI (JavaScript Interface) 可以使 JavaScript 和 原生模块 更快.更简单的通信.它也是React Native 新的架构体系中Fabric UI层 和 Turbo 模块的核心部分. JSI有什么不同 JSI 移除了原生代

  • React-Native之截图组件react-native-view-shot的介绍与使用小结

    React-Native之截图组件react-native-view-shot的介绍与使用小结

    目录 一.现象 二.解决 三.总结: 一.现象 1.需求:把某展示页面进行截取保存到相册.并可进行以海报的形式分享出去: 2.支持iOS和安卓 二.解决 1.安装: npm i --save react-native-view-shot 2.进行链接处理:react-native link react-native-view-shot 3.当为IOS时执行还需要执行一下命令(安卓不用):cd ios && pod install && cd .. 4.使用: (1).引用:

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

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

    目录 安装 使用 示例 有时使用了某个React Native 第三方库,可是它有些问题,我们不得不修改它的源码.本文介绍如何修改源码又不会意外丢失修改结果的方法. 我们可能不方便给原作者提 Pull Request,因为他们可能不愿意接受我们的更改.又或者原作者无法及时发布新版本. 种种原因,我们只有去修改 node_modules 目录下的文件. 可是当我们执行 yarn install 或 yarn add 时,原先的修改会丢失. 有没有办法让我们可以在 yarn install 或 ya

  • React Native中Navigator的使用方法示例

    React Native中Navigator的使用方法示例

    前言 众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用. 方法如下 首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代码. 1.习

  • React Native中实现动态导入的示例代码

    React Native中实现动态导入的示例代码

    目录 背景 多业务包 动态导入 Metro 打包原理 打包过程 bundle 分析 __d函数 __r函数 方案设计 分 识别入口 树拆分 bundle 生成 合 总结 背景 随着业务的发展,每一个 React Native 应用的代码数量都在不断增加,bundle 体积不断膨胀,对应用性能的负面影响愈发明显.虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理,拆分为一个基础包和一个业务包进行一定程度上的优化,但对日益增长的业务代码也无能为力,我们迫切地需要一套方案来

  • React Native 中实现确认码组件示例详解

    React Native 中实现确认码组件示例详解

    目录 正文 实现原理 开源方案 正文 确认码控件也是一个较为常见的组件了,乍一看,貌似较难实现,但实则主要是障眼法. 实现原理 上图 CodeInput 组件的 UI 结构如下: <View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none&

  • react native中的聊天气泡及timer封装成的发送验证码倒计时

    其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二种a页面获取要显示内容的形式是 点击出发,获取) 3 需要说的还是na

  • React Native中Android物理back键按两次返回键即退出应用

    React Native中Android物理back键按两次返回键即退出应用

    前言 本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 话不多说,直接上图: 测试代码 第16~22行 设置事件监听以及移除事件监听. componentWillMount(){ BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); } componentWillUnmount()

  • React Native中的RefreshContorl下拉刷新使用

    我们知道App中都有下拉加载,在React Native中也有类似的控件 一.属性方法 (1) onRefresh function 在视图开始刷新的时候调用 (2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中 (3) colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种 (4) enabled bool android平台适用 用来设置下拉刷新功能是否可用 (5) progre

  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法.分享给大家供大家参考,具体如下: 1.Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量. horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列.默认为

  • 浅析pip安装第三方库及pycharm中导入第三方库的问题

    pip安装的话,找到自己安装python的路径,在安装路径下会有一个文件夹,比如我的安装路径是c盘 我是默认安装路径,在里面有一个python36文件夹.哦对了,你们安装python的时候,我的是3.6版本,在安装界面记得吧add path这个选项勾上,这是帮你自动添加路径. 然后打开python36文件夹,里面有一个scripts.( 有的人会找不到AppData在哪,在c盘 ,因为被隐藏了.我的是win8系统,在查看里面 把这两个勾上,就能看到隐藏的文件了)打开scripts,里面有essa

  • 使用豆瓣源来安装python中的第三方库方法

    使用豆瓣源来安装python中的第三方库方法

    这里以安装简单的nonebot库为例子 欧克,简明扼要,拿走点赞哟: 大家想要的豆瓣源如下: 因为有几个,但在这里还是建议使用国内的豆瓣源,本人感觉好用. pip3 install nonebot -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com 解释一下啊:nonebot 这个是你自己要安装的第三方库的名字,自己想要装的第三方库就这改就行了. 下面这些是对于不会安装第三方库的同学们而写,如果会的话可以忽略下面,那就

随机推荐