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

Question

问题

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

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

下面是包结构的屏幕截图。封装结构

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

我目前的统计数据

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

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

环境 react-native 0.63.0补丁包6.2.0react-native-tab-view 2.15.1react-native-gesture-handler 1.5.6react-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",

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