如何使用 patch-package 修补 TSX 文件

Question

问题

我正在尝试使用 patch-package 来修补 react-native 包 react-native-tab-view，但是当我为 react-native-tab-view 编辑 node_module 中包含的 TSX 文件并应用我的补丁时，更改是未反映在我的应用中。

node_modules/react-native-tab-view的结构

下面是包结构的截图。 Package Structure

他们还使用@react-native-community/bob 在发布之前构建包，因此它会生成一个 lib 文件夹，其中包含一个模块文件夹和一个包含 JS 文件的 commonjs 文件夹。

我目前的统计数据

正在创建我的补丁，但是 /lib/module 中的文件不会更改，并且在模拟器上运行时更改也不会反映在我的应用中

在编辑 /src 中的 TSX 文件而不是模块 /lib/module 中的 JS 文件后，我尝试使用 patch-package 应用补丁，因为它更易于实现。

环境 反应原生 0.63.0 补丁包 6.2.0 反应原生标签视图 2.15.1 反应原生手势处理程序 1.5.6 react-native-reanimated 1.7.0

问题 我是否缺少构建或编译步骤来获取 react-native-tab-view 以从我为其创建补丁的 TSX 文件生成新的 JS 文件？

任何帮助将不胜感激！

Answer 1

通常当一个 npm 包发布时，它也会发布一个转译版本，因此您应该使用 patch-package 修改转译版本。

对于react-native-tab-view，转译后的版本位于lib文件夹中。

您可以通过检查库的package.json 来验证这一点，

  "main": "lib/commonjs/index.js",
  "react-native": "lib/module/index.js",
  "module": "lib/module/index.js",

更新

我的技巧是在本地克隆原始 repo，安装它的 deps，修改源代码中的任何内容 (src)，然后构建它，并将构建结果复制到包中的 node_modules，然后应用patch-package.