学习React Native的组件的Image标签的时候,发现加载网络图片的时候和官方代码写的一模一样,但是图片就是出不来。
我的代码:
<Image
style={styles.image}
source={{uri: 'http://www.qq1234.org/uploads/allimg/150420/100A5G63-1.jpg'}}/>
官方代码:
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400}} />
查资料发现ReactNative中文网和原文有点出入,有点手动删节的意思:
[ReactNative中文网](http://reactnative.cn/docs/0.39/images.html#content) [原文](http://facebook.github.io/react-native/docs/images.html)可以很明显的看到,ReactNative中文网对原文内容出入还是比较大的,在原文上写出了在IOS平台因为存在App Transport Security问题,所以需要特备注意,并且给出了链接说明:
大意是IOS 9以上的设备中因为App Transport Security的存在,它会拒绝所有不通过HTTPS发送的HTTP请求,因为图片服务器是http请求,所以导致图片无法显示。所以访问非https的地址需要在Info.plist进行ATS设置,那么手动修改了一下,但是并没有找到NSAllowsArbitraryLoads这个项,可能是XCode版本问题?因为我是Android原生开发者,对IOS不是非常熟悉,尝试了半天最后我是这么解决的:
- App Transport Security Settings 下新建 Allow Arbitrary Loads 条目,并设置值为YES.
然后重新部署,OK 解决,图片顺利显示出来了。
网友评论