reactjs React Native ：URI图像不显示在android上，但完美地显示在ios模拟器上

dddzy1tm 于 2022-11-22 发布在 React

关注(0)|答案(6)|浏览(216)

我正在开发一个React原生应用程序。我从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地址的属性。

reactjs

来源：https://stackoverflow.com/questions/70692624/react-native-uri-image-not-showing-on-android-but-perfectly-displays-on-the-ios

6条答案

按热度按时间

voj3qocg1#

我不依赖Android模拟器处理来自URL的图像，特别是那些来自API的图像。
然而，我注意到iOS模拟器在这方面给出了与iPhone类似的结果，而Android则不是这样。将其存储在手机上的store逻辑/AsyncStorage中我注意到，真实的的Android设备显示的图片比Android模拟器多得多。我花了很长时间才弄明白为什么 * 图像在Android上不起作用，但在iOS* 上却起作用，并有很多关于Stack Overflow的主题。显然，它们确实起作用，但在真实的设备上...是的，在调试过程中，我检查了http和https。这些映像是通过https提供的。我还设置了width和height。
有点令人沮丧，但我很好奇，如果有更多的人经历了这个问题。

赞(0）回复(0）举报 2022-11-22

8oomwypt2#

也许这看起来是一个问题，因为Android不允许http。
请在按如下方式更改Android设置后构建新的Android。

android/app/src/main/AndroidManifest.xml

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

赞(0）回复(0）举报 2022-11-22

hjzp0vay3#

你能解决这个问题吗？我也有同样的问题，我通过
1.封闭式Android模拟器

cd android && ./gradlew clean
1.在Android Studio设备管理器中擦除数据
并运行react-native start --reset-cache && react-native run-android

赞(0）回复(0）举报 2022-11-22

lokaqttq4#

尝试在URI中用引号（单引号或双引号）括起direct link。这可能在android中有效，并且您的大小调整模式也必须包含在样式中。

<Image
          style={styles.image}
          source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
          }}
        />

赞(0）回复(0）举报 2022-11-22

7fhtutme5#

我也遇到过同样的问题，但当我退出模拟器中的应用程序并重新打开它时，一切都很好，尽管我想这不是最好的解决方案

赞(0）回复(0）举报 2022-11-22

vs3odd8k6#

可能是存储权限。
检查手机上的应用程序详细信息，并给予应用程序存储权限

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs React Native ：URI图像不显示在android上，但完美地显示在ios模拟器上

6条答案

相关问题

热门标签

最新问答