React Native+Expo开发Android TV应用：如何添加android:banner资源？

直接手动修改AndroidManifest.xml会被Expo的预构建流程覆盖，正确的做法是通过Expo配置插件来持久化修改配置，同时正确放置资源文件，具体步骤如下：

1. 创建自定义Expo配置插件 #

创建一个名为withAndroidTVBanner.js的插件文件，用来自动修改AndroidManifest.xml的application节点，添加android:banner属性：

const { withAndroidManifest } = require('@expo/config-plugins');

module.exports = function withAndroidTVBanner(config) {
  return withAndroidManifest(config, async (config) => {
    const application = config.modResults.manifest.application[0];
    // 指定banner资源的引用路径
    application.$['android:banner'] = '@drawable/tv_banner';
    return config;
  });
};

2. 在项目配置中注册插件 #

打开app.json或app.config.js，将自定义插件添加到plugins数组：

{
  "expo": {
    "plugins": ["./withAndroidTVBanner.js"]
  }
}

3. 放置TV Banner资源 #

• 准备符合Android TV规范的banner图片（推荐尺寸320x180px，格式为PNG）
• 将图片命名为tv_banner.png，放到项目的android/app/src/main/res/drawable/目录下；如果需要适配不同dpi屏幕，可以将对应尺寸的图片放到drawable-xxxhdpi、drawable-xxhdpi等子目录中

4. 预构建并验证配置 #

运行预构建命令，让Expo应用插件配置：

npx expo prebuild --platform android

预构建完成后，打开android/app/src/main/AndroidManifest.xml，确认application标签下已生成android:banner="@drawable/tv_banner"属性，之后正常构建APK/AAB即可。

注意事项 #

• 不要手动修改生成的AndroidManifest.xml，每次预构建或执行expo run:android都会覆盖手动修改的内容
• 确保banner图片尺寸符合Android TV官方规范，避免显示变形或被截断

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