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

Question

我正在开发一个示例 React Native 项目。除了 <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

Answer 1

问题出在我的捆绑包打包命令上。正如@luwu 在他的评论中所说，我检查了this，很惊讶与我的没有区别。然后只有我在运行命令

时注意到一条消息

"Assets destination folder is not set, skipping..."

该消息有点令人困惑，因为已在资产文件夹中创建了捆绑包。该消息中的 '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/

Answer 2

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

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

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

来自入门项目 gradle 文件中的文档：

By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the bundle directly from the development server.

Answer 3

我遇到了同样的问题。结果我从 react-native-elements 导入图像组件而不是 rect-native.fixed 我的案例

Answer 4

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

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

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

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

Answer 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 键（属性），它在 IOS 中工作正常，但我需要将其更改为 uri 对于 android.

Answer 6

对我个人有帮助的（none 这里的解决方案有效）是从 https://.... 打开外部图像并且有效。所以我决定尝试使用 'file://' + DocumentDirectoryPath + '/' + item.image 并且成功了。

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

React-native: Images not showing in android device; but shows perfectly in emulator

android

image

android-emulator

react-native

第一个

第二