Nx项目集成Stripe React Native时Android构建因注解缺失失败

问题描述 #

在Nx monorepo项目中安装并集成@stripe/stripe-react-native后，执行Android构建时失败，报错提示googlepay_button_dark.xml未添加@Input注解，但在react-native CLI创建的新项目中无此问题。核心报错信息：

Task :stripe_stripe-react-native:packageDebugResources FAILED
ERROR:/Users/esfxra/monorepo/apps/test-app/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/googlepay_button_dark.xml: Resource and asset merger: ... is not annotated as @Input
java.lang.IllegalStateException: ... is not annotated as @Input

解决方案 #

方案1：用patch-package修复Stripe Android模块的Gradle配置 #

通过补丁工具修改依赖包配置，避免每次安装依赖后重复操作：

1. 打开node_modules/@stripe/stripe-react-native/android/build.gradle文件
2. 在android代码块末尾添加以下配置，标记相关资源为构建输入：

   tasks.withType(com.android.build.gradle.tasks.ProcessAndroidResources) {
       inputs.files fileTree(dir: 'src/main/res/layout', include: [
           'googlepay_button_dark.xml',
           'googlepay_button_light.xml'
       ])
   }
   

3. 安装补丁工具：npm install patch-package --save-dev
4. 生成补丁文件：npx patch-package @stripe/stripe-react-native
5. 后续安装依赖后，执行npx patch-package自动应用补丁

方案2：调整Nx项目的全局Gradle配置 #

在Nx项目根目录的build.gradle（或apps/[你的应用名]/android/build.gradle）中添加全局规则：

subprojects {
    afterEvaluate { project ->
        if (project.name.startsWith('stripe_stripe-react-native')) {
            tasks.withType(com.android.build.gradle.tasks.ProcessAndroidResources) {
                inputs.files fileTree(dir: "${project.projectDir}/src/main/res/layout", include: [
                    'googlepay_button_dark.xml',
                    'googlepay_button_light.xml'
                ])
            }
        }
    }
}

方案3：切换Stripe包版本 #

尝试升级或降级到已知兼容Nx的版本，例如：

npm install @stripe/stripe-react-native@0.38.0

可查看包的更新日志，确认是否有针对Nx monorepo的修复内容

方案4：同步Nx React Native插件版本 #

确保@nrwl/react-native插件版本与项目中react-native版本匹配，更新命令：

npm install @nrwl/react-native@latest --save-dev

内容的提问来源于stack exchange，提问作者Googlian