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

【问题标题】：React-native: Images not showing in android device; but shows perfectly in emulatorReact-native：图像未显示在 android 设备中；但在模拟器中完美显示
【发布时间】：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

【问题讨论】：

这里是答案：stackoverflow.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

标签： android image android-emulator react-native

【解决方案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。

【讨论】：