學習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.
Info.plist設置
然后重新部署,OK 解決,圖片順利顯示出來了。