React Native Android远程URI图片无法显示，求问需额外配置吗？

你遇到的这个问题在React Native开发里挺常见——同样的远程图片代码在iOS上能正常显示，到Android模拟器就罢工，确实是因为Android平台需要一些额外配置或代码修正才能正常工作。下面是一步步的解决思路：

1. 先修正Image组件的语法错误 #

先看你贴的代码：

<Image source={uri: 'https://reactnativecode.com/wp-content/uploads/2017/05/react_thumb_install.png'} style = {{height: 200, resizeMode : 'stretch', margin: 5 }} />

这里source的写法有问题！source需要接收一个对象类型的值，正确写法得用双层大括号包裹：

<Image 
  source={{uri: 'https://reactnativecode.com/wp-content/uploads/2017/05/react_thumb_install.png'}} 
  style={{height: 200, resizeMode: 'stretch', margin: 5 }} 
/>

这个语法错误很可能是图片不显示的直接原因，先改完这个试试。

2. 给Android应用添加网络权限 #

Android应用默认没有网络访问权限，必须手动在android/app/src/main/AndroidManifest.xml里添加权限声明：

<!-- 放在manifest标签内部，application标签之前 -->
<uses-permission android:name="android.permission.INTERNET" />

加完之后记得重新编译项目（执行npx react-native run-android）。

3. 处理Android 9+的明文HTTP限制 #

如果你的图片URL是http协议（不是https），Android 9（API级别28）及以上系统会默认阻止明文HTTP请求，这时候需要配置网络安全策略：

• 在android/app/src/main/res/xml目录下新建network_security_config.xml文件（如果xml目录不存在就手动创建），内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

• 然后在AndroidManifest.xml的application标签里引用这个配置：

<application
  ...
  android:networkSecurityConfig="@xml/network_security_config">
  ...
</application>

不过你的示例URL是https，这一步可能用不上，但如果后续用到http链接可以参考。

4. 排查模拟器本身的网络问题 #

有时候不是代码或配置的锅，是模拟器的网络连接出了问题：

• 检查模拟器的WiFi是否已正常连接（可以在模拟器的设置里查看网络状态）
• 尝试重启模拟器，或者用adb reboot命令重启设备
• 切换模拟器的网络模式（比如从WiFi切换到蜂窝网络模拟）
• 先在电脑浏览器里打开这个图片URL，确认网络能正常访问到图片

5. 试试第三方图片加载库 #

如果以上步骤都试过还是不行，可以换用第三方图片加载库，比如react-native-fast-image，它对Android的兼容性更好，还自带缓存功能：

# 安装依赖
npm install react-native-fast-image
# iOS端需要安装pod
npx pod-install ios

使用示例：

import FastImage from 'react-native-fast-image';

<FastImage
  style={{height: 200, resizeMode: 'stretch', margin: 5 }}
  source={{
    uri: 'https://reactnativecode.com/wp-content/uploads/2017/05/react_thumb_install.png',
    priority: FastImage.priority.normal,
  }}
  resizeMode={FastImage.resizeMode.stretch}
/>

建议先从修正语法错误和添加网络权限开始排查，这两个是最常见的触发原因。

内容的提问来源于stack exchange，提问作者Bhuvana Abhisheg