React Native构建Android APK时图片不显示问题求助

执行yarn apk:build构建Android APK后，图片完全不可见，但iOS环境下显示正常。点击图片区域功能正常，仅无法看到图像。

构建脚本 build-apk.sh #

echo "# Delete build folder"
rm -rf android/app/build

echo "# React-Native bundling"
react-native bundle --reset-cache --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

rm -rf android/app/src/main/res/drawable-*
rm -rf android/app/src/main/res/raw

echo "# Gradle build"
export JAVA_HOME=$(/usr/libexec/java_home -v 15)
cd ./android; ./gradlew clean; ./gradlew assembleDebug; cd ..; open ./android/app/build/outputs/apk/debug

echo "# Finish android build"

package.json 相关配置 #

{
  "name": "CharlieNotice",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "patch-package",
    "clean:build:android": "rm -rf android/app/build",
    "prod:android": "npm run clean:build:android  && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
    "build:apk": "./build-apk.sh"
  },
  "dependencies": {
    "@apollo/client": "^3.7.14",
    "@apollo/react-hooks": "^4.0.0",
    "@gorhom/bottom-sheet": "^4.4.6",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "@types/axios": "^0.14.0",
    "@types/styled-components": "^5.1.26",
    "apollo-link-error": "^1.1.13",
    "axios": "^1.4.0",
    "deprecated-react-native-prop-types": "^4.1.0",
    "global": "^4.4.0",
    "graphql": "^16.6.0",
    "ios-deploy": "^1.12.2",
    "moment": "^2.29.4",
    "patch-package": "^7.0.0",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-apollo-network-status": "^5.2.1",
    "react-native": "^0.71.7",
    "react-native-camera": "^4.2.1",
    "react-native-config": "^1.5.1",
    "react-native-flash-message": "^0.4.1",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-reanimated": "^3.1.0",
    "react-native-rename": "^3.2.12",
    "react-native-safe-area-context": "^4.5.2",
    "react-native-screens": "^3.20.0",
    "recoil": "^0.7.7",
    "styled-components": "^5.3.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.71.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.9",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

图片引用代码 #

<LogoWrapperComponnet>
  <LogoImageComponent
    source={require('../../assets/logo.png')}></LogoImageComponent>
  <LogoTextComponent>Platform</LogoTextComponent>
</LogoWrapperComponnet>

解决方案 #

问题根源在于构建脚本里的这两行命令：

rm -rf android/app/src/main/res/drawable-*
rm -rf android/app/src/main/res/raw

react-native bundle已经将图片资源打包到drawable-*目录下，你紧接着删除这些目录，直接导致APK中缺失图片资源，所以无法显示。

修复步骤：

1. 编辑build-apk.sh，删除上述两行删除资源目录的命令
2. 重新执行yarn apk:build构建APK

额外排查点：

• 确认图片路径../../assets/logo.png真实存在
• 检查LogoImageComponent的样式是否指定了宽高（无宽高的图片会显示为0尺寸，视觉上等同于不显示）
• 若问题仍存在，可执行react-native bundle时添加--verbose参数，查看资源打包日志，确认图片是否被正确处理

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