React Native 物理设备加载网络图片不显示但本地图片正常怎么办

问题原因及解决方案 #

• 未给Image组件设置明确宽高：React Native加载远程网络图片时，不会像本地require引入的资源一样自动读取图片原始尺寸，默认宽高为0，所以无法显示。你需要给Image组件添加style属性手动指定宽高，示例代码如下：

<Image 
  style={{ width: 300, height: 300 }} 
  source={{ uri: 'https://i.imgur.com/G1iFNKI.jpg' }} 
/>

• 缺少网络权限（Android设备）：加载远程资源需要APP申请网络权限，检查android/app/src/main/AndroidManifest.xml文件中是否添加了INTERNET权限，没有的话需要在manifest标签下添加如下配置：

<uses-permission android:name="android.permission.INTERNET" />

• 域名访问限制：如果你在国内使用，imgur域名本身属于被屏蔽的资源，浏览器能打开大概率是开启了代理，而运行APP的物理设备没有配置对应代理，自然无法加载图片。你可以换个国内可访问的图片CDN链接测试验证。
• iOS ATS配置限制（仅iOS）：虽然你用的是HTTPS链接，若存在证书不符合ATS要求的情况也会加载失败，测试阶段可以临时在Info.plist中添加允许任意加载的配置，正式上线记得改回符合要求的配置。

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