Nie można wyświetlić obraz o URI w React Native iOS Simulator

Question

używam reagować-rodzimy 0.28.0

Staram się pokazać obraz na iPhone symulatora według tego poradnika: http://www.appcoda.com/react-native-introduction/

var styles = StyleSheet.create({ 
image: { 
    width: 107, 
    height: 165, 
    padding: 10 
    } 
} 

var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api' 

Następnie w funkcji render() dodam to:

<Image style={styles.image} source={{uri:imageURI}} /> 

przestrzeń przeznaczona na obrazie jest tam, ale obraz nie jest wyświetlany.

---

Jeśli jednak zamiast tego użyję obrazu lokalnego, obraz zostanie wyświetlony.

var Picture = require('./content.jpeg') 

W render() funkcję:

<Image source={Picture} style={styles.thumbnail} /> 

Jak mogę pokazać obraz za pomocą URI jako źródło?

Answer 1

Problemem jest to, że starają się załadować obraz z połączenie HTTP, a nie z połączenia https, ponieważ wymaga tego jabłko.
Sprawdź, czy Twój kod działa z innym urządzeniem uri, które używa protokołu HTTPS zamiast http. W systemie Android powinien działać poprawnie z protokołem http lub https.
Przeczytaj więcej na https://github.com/facebook/react-native/issues/8520 i http://www.techrepublic.com/article/wwdc-2016-apple-to-require-https-encryption-on-all-ios-apps-by-2017/.

Jeśli naprawdę chcesz załadować coś na http, możesz edytować plik info.plist i dodać tam swój wyjątek. Więcej szczegółowych informacji o https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

Zobacz także moje pytanie stackoverflow tutaj: React-native loading image over https works while http does not work

Answer 2

Czy próbowałeś owijać go w URI:?

<Image source={{uri: imageURI}} style={styles.thumbnail} /> 

Answer 3

Oto przykładowy kod dla ikony Hamburger w obraz-

<Image source={{ uri: 'http://i.imgur.com/vKRaKDX.png', width: 32, height: 32, }} /> 

uzyskać więcej informacji można zwrócić się tutaj- https://facebook.github.io/react-native/docs/image.html

Answer 4

tylko edytować list.info pliku w polu: "NSAppTransportSecurity" w iOS React Native takich jak:

<dict> 
    <key>NSExceptionDomains</key> 
    <dict> 
     <key>localhost</key> 
     <dict> 
      <key>NSExceptionAllowsInsecureHTTPLoads</key> 
      <true/> 
     </dict> 
     <key>resizing.flixster.com</key> 
     <dict> 
      <!--Include to allow subdomains--> 
      <key>NSIncludesSubdomains</key> 
      <true/> 
      <!--Include to allow HTTP requests--> 
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> 
      <true/> 
      <!--Include to specify minimum TLS version--> 
      <key>NSTemporaryExceptionMinimumTLSVersion</key> 
      <string>TLSv1.1</string> 
     </dict> 
    </dict> 
</dict>