web-dev-qa-db-fra.com

Impossible d'afficher l'image dans React Native

J'utilise react-native 0.28.0

J'essaie de montrer une image sur un simulateur iPhone selon ce tutoriel: 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'

Puis dans la fonction render(), j'ajoute ceci:

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

L'espace alloué à l'image est là, mais l'image n'est pas affichée.

iosreact-native
19
Fredric Sanjaya

En plus de la réponse de Jonathan Stellwag, la 1ère solution ne fonctionne que si l'URI utilise https ou en définissant la sécurité de transport d'application.

Voir Impossible d'afficher Image par URI dans React Simulateur iOS natif

14
Fredric Sanjaya

J'espère que les solutions suivantes pourront vous aider - tout peut être utilisé pour Image

1. Solution HTTPS:

  1. Votre image est fournie par un URI - source={{uri:imageURI}}
  2. Exemple: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
  3. Important: N'oubliez pas de définir le clip deux fois: {{}}

2. Solution HTTP:

  1. Si vous voulez http, cherchez la solution suivante - numéro HTTP Github
  2. La solution: - Solution HTTP

3. Image locale

  1. Enregistrer: créez un nouveau dossier pour vos images et sauvegardez-les localement (dossier: images)
  2. Require: Exige l'image que vous avez sauvegardée localement en utilisant la syntaxe parmi

var yourPicture = require ('./images/picture.jpg');

  • Notation pour le même dossier ('./')
  • Notation pour le dossier ci-dessus ('../')
  • Notation pour plus de dossier ci-dessus ('../../../')
  1. Utilisation: Utilisez votre image dans la fonction de rendu.
render(){
    return(
        <Image source={yourPicture}/>
    )
}

Le style de vos images fonctionne comme vous l'avez décrit

38
Jonathan Stellwag

Lorsque vous ajoutez une balise Image et utilisez uri, vous devez vérifier les points suivants:

  • Ajout de styles de largeur et de hauteur pour la balise Image:
    ex:
    <Image source={{uri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
    image doc

  • Utilisation d'URL HTTP: vous devez activer la sécurité du transport d'applications.
    Sécurité du transport d'applications pour iOS

  • Utilisation des URL HTTPS: cela fonctionnera normalement

13
Belal mazlom

Pour tous ceux qui arrivent ici, si la réponse acceptée ne vous convient pas, assurez-vous que votre image a un style approprié. Pour les images importées par URI, vous devez définir la hauteur et la largeur.

6
Lucas Bernardo

Mon problème était dans le chemin. react-native-fs Renvoie un chemin semblable à /storage/emulated/0/Android/data/com.blah/blah.jpeg, Mais les composants Image exigent qu'il soit file:///storage/emulated/0/Android/data/com.blah/blah.jpeg

0
Kostiantyn

J'ai eu exactement le même problème et ma solution a été de définir ce que vous avez comme var styles = ... à const styles = ... et c'est tout cela a résolu mon problème.

0
Jonas Weimar