Question

我正在研究一个示例反应原生项目。几乎除<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);

项目结构：

React-native version：react-native：0.32.1

Answer 1

问题在于我的捆绑包装命令。正如@luwu在评论中所说，我检查了this，并惊讶地发现与我的没有任何区别。然后我只是在运行命令时发现了一条消息

＆＃34;未设置资产目标文件夹，正在跳过...＆＃34;

由于已在assets文件夹中创建了bundle，因此该消息有点令人困惑。资产＆＃39;在那个消息实际上表明我的图像。我用以下命令解决了这些问题：

LJ4 <- function(dt_x_, dt_y_, by_)
{ 
  by_ <- substitute(by_)
  if (!is.character(by_)) by_ <- deparse(by_)
  dt_y_[dt_x_, on = by_] 
}

Answer 2

针对同一期未开发资产的另一种解决方案。

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

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

从入门项目gradle文件中的文档中：

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

Answer 3

我遇到了同样的问题。原来我从 react-native-elements 导入图像组件而不是 rect-native.fixed my case

Answer 4

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

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

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

因此，出于某种原因，iOS 已经可以正常工作，无需在请求中添加此标头。但关键是添加 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 key(property)，它在 IOS 中运行良好，但我需要将其更改为 uri for android。

React-native：图片未在Android设备中显示;但在模拟器

5 个答案:

第一个

第二