Skip to content

Impossible d’afficher l’image par URI dans React Native iOS Simulator

Solution:

Le problème est que vous essayez de charger l’image à partir d’une connexion http et non d’une connexion https comme l’exige Apple.

Essayez si votre code fonctionne avec une autre uri qui utilise https au lieu de http. Sous Android, cela devrait fonctionner correctement avec http ou https.

En savoir plus sur https://github.com/facebook/react-native/issues/8520 et WWDC 2016 : Apple exigera le cryptage HTTPS sur toutes les applications iOS d’ici 2017.

Si vous voulez vraiment charger quelque chose sur http, vous pouvez éditer le fichier info.plist et y ajouter votre exception. Des informations plus détaillées ici : Configuration des exceptions de sécurité du transport d’applications dans iOS 9 et OSX 10.11.

Voir aussi ma question StackOverflow ici : L’image de chargement native de React sur https fonctionne alors que http ne fonctionne pas.

Voici un exemple de code pour l’icône Hamburger dans l’image-

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

pour plus d’informations, vous pouvez vous référer ici-https://facebook.github.io/react-native/docs/image.html

éditez simplement le fichier list.info dans le champ : “NSAppTransportSecurity” dans ios de React Native tels que :

<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>



Articles Similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *