如何让React-Native Expo应用启动屏符合ADA无障碍标准？

Google Play预启动报告提示的启动屏无障碍错误，是因为默认通过app.json配置的Expo启动屏未添加屏幕阅读器可识别的标签（对应Android的contentDescription属性）。以下是两种解决方法，无需完全自定义启动屏：

方法一：使用Expo Config Plugin自动添加标签 #

1. 在项目根目录创建withSplashAccessibility.js文件，内容如下：

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

module.exports = function withSplashAccessibility(config) {
  return withAndroidStyles(config, async (config) => {
    const styles = config.modResults;
    const splashImageView = styles.resources.find(res => res.name === 'splash_screen_image');
    if (splashImageView) {
      splashImageView.$['android:contentDescription'] = '@string/app_name';
    }
    return config;
  });
};

2. 在app.json的expo.plugins数组中引入该插件：

{
  "expo": {
    // 其他原有配置
    "plugins": ["./withSplashAccessibility.js"]
  }
}

这个插件会自动修改Android启动屏布局，给启动屏图片添加对应应用名称的无障碍标签。

方法二：预构建后手动修改原生代码 #

1. 运行命令生成原生项目文件：

npx expo prebuild

2. 打开Android项目中的android/app/src/main/res/layout/launch_screen.xml文件
3. 找到<ImageView>标签，添加android:contentDescription="@string/app_name"属性（也可以替换为自定义的无障碍文本）
4. 重新构建项目并提交至Google Play

注：@string/app_name会引用你在app.json中配置的应用名称，也可以在android/app/src/main/res/values/strings.xml中自定义新的字符串资源。

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