如何使用 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 文件，因为它更容易实现。

环境反应本机 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.

How to use patch-package to patch TSX files