当我构建APK时,我无法在React Native中看到图像。

huangapple go评论62阅读模式
英文:

When I build the apk, I can't see the image in react-native

问题

以下是您要翻译的内容:

"Even if I do yarn apk:build,
The image is not visible.
I can see it well in the iOS environment"

"这是我的代码"

{
"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"
}
}

"这是我的package.json文件的内容"



Platform

"这是图片部分的代码"

英文:

Even if I do yarn apk:build,
The image is not visible.
I can see it well in the iOS environment

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"

this is my code

    "build:apk": "./build-apk.sh"

and script in my package.json

please help me

+

{
  "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"
  }
}

my package.json

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

and code of the image part

It works normally when pressed, but, I literally can't see the image.

答案1

得分: 1

我不认为你需要删除新版本的 React Native 中的 drawable 和 raw 文件夹。

运行以下命令:

对于 iOS:

npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/build/bundle.js

对于 Android:

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle

不要删除 drawable 和 raw 文件夹。

或者从你的 build-apk.sh 文件中移除或注释以下行:

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

英文:

I don't think you need to remove drawable and raw folder for newer versions of react native

run these commands

for ios

npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/build/bundle.js

for android

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle

and don't delete drawable and raw folder

or just remove or comment these lines from your build-apk.sh file

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

答案2

得分: 0

如果您可以正确构建APK,我认为问题不是在构建方面。
您能否更新您使用的显示图像的库以及图像部分的确切代码?

英文:

If you can build the apk properly I don't think the problem is the building.
can you update your code of what library you are using to show image, and the exact code of the image part?

huangapple
  • 本文由 发表于 2023年7月3日 10:11:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76601493.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定