React Native：uri 图像未在 android 上显示，但在 ios 模拟器上完美显示

【问题标题】：React Native: uri image not showing on android but perfectly displays on the ios emulatorReact Native：uri 图像未在 android 上显示，但在 ios 模拟器上完美显示
【发布时间】：2022-01-13 07:05:24
【问题描述】：

我正在开发一个 react-native 应用程序。我正在从 API 中获取一些图像并将它们显示为平面列表。问题是这些图像在 ios 模拟器上完美显示，但在 android 模拟器上不显示。我已经为图像设置了宽度和高度，但问题仍然存在。
下面是代码
组件

 <Image
          style={styles.image}
          source={{
            uri: image,
          }}
          resizeMode="contain"
        />

样式



container__image: {
    width: '100%',
  },
  image: {
    width: '100%',
    height: 200,
    resizeMode: 'contain',
  },

uri 前面的image 是一个道具，其中包含图片的http 地址。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

也许这似乎是一个问题，因为Android不允许http。

请在更改Android 设置后构建一个新的Android，如下所示。

android/app/src/main/AndroidManifest.xml

<application
        android:usesCleartextTraffic="true"> // you add this
...
</application>

【讨论】：

对不起，我拼错了https
@AliRaza 可以分享一下测试的图片路径吗？
我也已将您的解决方案添加到我的文件中，但它不起作用
digidrip-dev.s3.us-west-1.amazonaws.com/1641987422138-image.png
使用以下代码为我工作：import React from 'react'; import {View, Image} from "react-native"; export default function App() { let image = 'https://digidrip-dev.s3.us-west-1.amazonaws.com/1641987422138-image.png' return( <View> <Image style={{ width: '100%', height: 200, resizeMode: 'contain' }} source={{ uri: image, }} resizeMode="contain" /> </View> )}