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

używam reagować-rodzimy 0.28.0Nie można wyświetlić obraz o URI w React Native iOS Simulator

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?

Źródło

2016-07-01 Fredric Sanjaya

samym problem z tobą i rozwiązałeś problem z odpowiedzi, którą przyjąłeś, dziękuję bardzo. –

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

Źródło

2016-07-01 20:06:00 Orlando

Dzięki! To rozwiązuje problem –

Dziękuję bardzo. –

DZIĘKUJEMY SOOO DUŻO – Zorox

-1

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

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

Źródło

2016-07-01 06:11:25 mstearne

Tak, owinąłem to w uri, o czym wspomniałem w pytaniu. Próbowałem również zmienić kolejność, jak pokazuje odpowiedź, ale obraz nadal się nie wyświetla. –

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

Źródło

2016-07-01 06:20:25 Dlucidone

Próbowałem tego przykładowego kodu, ale to nie działa w moim Symulator iPhone 6 (iOS 9.3) –

Czy dodałeś komponent obrazu w wymaganiu? – Dlucidone

Oto działa kod https://www.rnplay.org/apps/1ePEIg – Dlucidone

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>

Źródło

2017-05-12 18:20:25

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

Odpowiedz

Powiązane problemy