React-native：图像未显示在 android 设备中；但在模拟器中完美显示

Posted 2023-02-23

【中文标题】React-native：图像未显示在 android 设备中；但在模拟器中完美显示

【英文标题】：React-native: Images not showing in android device; but shows perfectly in emulator

【发布时间】：2017-01-16 01:02:46

【问题描述】：

我正在开发一个示例反应原生项目。除了<Image source=''/> 之外，几乎所有功能都可以很好地使用它。该图像在 android studio 和 genymotion 提供的 android 模拟器中显示良好，但不适用于任何真实设备（moto G3 turbo、nexus 5、galaxy s4 等）。我不知道我的代码出了什么问题。这是我的代码

import React,  Component  from 'react';
import 
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
 from 'react-native';

class ImageTester extends Component 
  render() 
    return (
      <View style=styles.container>
        <Text style=styles.welcome>
          Welcome to React Native!
        </Text>
        <Text style=styles.instructions>
          To get started, edit index.android.js
        </Text>
        <Text style=styles.instructions>
          Double tap R on your keyboard to reload,'\n'
          Shake or press menu button for dev menu
        </Text>
        <Image source=require('./img/first_image.png')></Image>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  welcome: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  ,
  instructions: 
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  ,
);

AppRegistry.registerComponent('ImageTester', () => ImageTester);

项目结构：

反应原生版本：反应原生：0.32.1

【问题讨论】：

这里是答案：***.com/questions/35567502/…

@luwu 我已经经历过了。它对我不起作用。

@luwu 你是对的。问题出在 bundle 打包命令上。我已经解决了。我将其发布在下面作为自我回答。感谢您的所有帮助。:-)

你需要设置width, height of Image 这样的组件<Image source=require('./img/first_image.png') style= width: 100, height: 100 ></Image>

@ubatin 如果您使用的是本地图像，则不需要指定图像尺寸。看看这些例子：-facebook.github.io/react-native/releases/0.33/docs/image.html

【参考方案1】：

问题出在我的打包命令上。正如@luwu 在他的评论中所说，我检查了this，并惊讶于与我的没有区别。然后只有我在运行命令时注意到一条消息

“资产目标文件夹未设置，正在跳过...”

这个消息有点混乱，因为 bundle 已经在 assets 文件夹中创建了。该消息中的“资产”实际上表示我的图像。我用以下命令解决了问题：

react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --dev false --reset-cache --assets-dest android/app/src/main/res/

【讨论】：

当我尝试生成发布版本时出现重复资源错误，然后我必须删除在 android/app/main/res 中生成的资源

如果我只是在构建文件夹中更改资产目录进行调试，那么我得到没有问题 react-native bundle --platform android --entry-file index.js --bundle-output android/app/ src/main/assets/index.android.bundle --dev false --reset-cache --assets-dest android/app/build/generated/res/react/debug

【参考方案2】：

针对同一问题的未捆绑在开发中的资产的另一种解决方案。

将以下行添加到您的app/build.gradle 文件的project.ext.react 部分：

project.ext.react = [
    ... other properties
    bundleInDebug: true // <-- add this line
]

来自起始项目 gradle 文件中的文档：

默认情况下会跳过 bundleDebugJsAndAssets，因为在调试/开发模式下，我们更喜欢直接从开发服务器加载包。

【讨论】：

手动捆绑时避免重复资源问题的额外好处（如其他答案的 cmets 中突出显示的那样）。

【参考方案3】：

我在我的项目中遇到了类似的问题。我的问题是图像在 ios 上显示正常，但在 android（设备）上没有显示。

所以我的问题通过在我的图片中添加以下标题得到解决：

  <Image
    source=
      uri: 'https://imageurladdress/img.png',
      headers: 
        Accept: '*/*',
      ,
    
    style=styles.imageStyle
  />

因此，由于某种原因，iOS 已经可以正常工作，而无需在请求中添加此标头。但关键是添加 headers 字段后，图像在 iOS 和 android 设备上都显示正确。

【参考方案4】：

我有同样的问题。原来我从 react-native-elements 而不是 rect-native 导入图像组件。修复了我的情况

【参考方案5】：

就我而言，有两件事导致了问题

第一

我在 http://localhost:3000 运行我的后端，任何图像资产的 URI 都类似于

http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOns

但android模拟器将其公开为

http://10.0.2.2:3000/.....

所以http://localhost:3000 在模拟器中是无法访问的。因此，我确保从后端设置了适当的主机，以查看哪个设备正在请求 API。

第二

在提供给<Image> 组件的参数中，我使用了url key(property)，它在IOS 中运行良好，但我需要将其更改为uri for android。