web-dev-qa-db-fra.com

Problème nécessitant un module d'image dans React Native

Je viens juste de commencer avec React-Native et je ne parviens pas à obtenir une image statique.

Voici le code très basique que j'ai jusqu'à présent:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var buzz = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={require('image!bg')}  style={styles.bg}>
          <Text style={styles.welcome}>
            Welcome to Buzz! iOS interface to
          </Text>
          <Text style={styles.welcomeHeader}>Charityware</Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  welcomeHeader: {
    fontWeight: '600',
    fontFamily: 'Helvetica',
    color: '#fff',
    fontSize: 50,
    alignSelf: 'center'
  },
  bg: {
    width: 400,
    height: 300,
    alignSelf: 'auto',

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
  },
});

AppRegistry.registerComponent('buzz', () => buzz);

Le problème principal est:

    <Image source={require('image!bg')}  style={styles.bg}>
      <Text style={styles.welcome}>
        Welcome to Buzz! iOS interface to
      </Text>
      <Text style={styles.welcomeHeader}>Charityware</Text>
    </Image>

Lorsque je compresse et exécute mon application, une erreur de rendu s’affiche: error image

Je comprends que vous devez ajouter des images dans xcode en tant qu’ensemble d’images pour que l’appel require puisse trouver l’image et vous avez ajouté un ensemble d’images à cette fin:bg image

...Mais en vain. Quelqu'un a des pensées? J'ai lu les documents et semble sembler le faire de la manière prescrite. Merci!

javascriptiosxcodereactjsreact-native
38
markthethomas

Depuis la version 0.14 de React Native, le traitement des images a été normalisé pour iOS et Android et est maintenant différent. Je n'ai pu trouver aucune documentation, à l'exception de cette note de validation très claire sur Github: Documenter le nouveau système de ressources .

Il n'y a qu'une capture d'écran de la documentation proposée:  enter image description here

Mise à jour: Il existe maintenant un lien vers la documentation réelle: https://facebook.github.io/react-native/docs/images.html

43
jlapoutre

J'ai eu un problème similaire, puis j'ai renommé les fichiers image dans le système de fichiers sous les répertoires Images.xcassets du projet xcode avec suffixes et majuscules pour correspondre à l'image que je charge. 

Par exemple, si source={require('image!Villagers')}, les fichiers d’image nommés avec précision comme Villagers.png, [email protected] et [email protected] étaient requis. Si la partie '@ 3x' du nom de fichier n'y était pas, l'image ne serait pas trouvée. 

31
McG

Quelle version de React Native utilisez-vous? Il y avait un problème avec le conditionneur, lié à cela, qui a été résolu.

Si tel est le cas, vous pouvez mettre à jour ou exécuter le serveur dev avec:

node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

https://github.com/facebook/react-native/issues/282

4
tadeuzagallo

On a déjà répondu à cette question, mais si vous utilisez React Native sur Android, vous pourriez avoir le même problème. Pour moi, la solution utilisait source={{ uri: "google", isStatic: true }} au lieu de source={required('./bg.png')}.

N'oubliez pas d'ajouter vos images dans le dossier src/main/res/drawable.

3
Hadrien Beaufils

REMARQUE: La construction de l'application est requise pour les nouvelles ressources Chaque fois que vous ajoutez une nouvelle ressource à Images.xcassets, vous devez> reconstruire votre application via XCode avant de pouvoir l'utiliser - un rechargement depuis> le simulateur ne suffit pas . (de React Native docs https://facebook.github.io/react-native/docs/image.html#content ) 

Assurez-vous également de redémarrer le conditionneur. Cela a résolu le problème pour moi. 

2
user1813705

Vous pouvez facilement faire référence aux images en créant le fichier package.json dans votre dossier de ressources.

Structure du dossier de projet

package.json

Et vous pouvez l'appeler par ce code.

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>
1
Alex Petre

Pour les images statiques, vous devez fournir le chemin tel que: 

<Image source={require('./images/back.png')}  
style= {{width:25, height:25, marginLeft:12, padding:12}}/>

Cela a fonctionné pour moi, pour l'image stockée dans le dossier images du répertoire du projet:

0
Анураг Пракаш