web-dev-qa-db-fra.com

React-native: les images ne s'affichent pas dans Android; mais s'affichent parfaitement dans l'émulateur

Je travaille sur un exemple de projet natif React. Et presque toutes les fonctionnalités sauf le <Image source=''/> fonctionne bien avec. L'image s'affiche bien dans Android émulateur fourni avec Android studio et genymotion, mais ne fonctionne sur aucun appareil réel (moto G3 turbo, nexus 5, galaxy s4) etc ...). Je ne sais pas ce qui a mal tourné avec mon code. Voici mon code

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

class ImageTester extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.Android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
        <Image source={require('./img/first_image.png')}></Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

structure du projet:

enter image description here

Version React-Native: React-Native: 0.32.1

androidimageandroid-emulatorreact-native
15
Ansal Ali

Le problème était avec ma commande d'empaquetage de paquet. Comme @luwu l'a dit dans son commentaire, j'ai vérifié this , et surpris qu'il n'y ait pas de différence avec le mien. Alors seulement j'ai remarqué un message lors de l'exécution de la commande

"Le dossier de destination des actifs n'est pas défini, ignoré ..."

Ce message était un peu déroutant car le bundle était déjà créé dans le dossier des ressources. Les "atouts" dans ce message indiquent en fait mes images. Et j'ai résolu les problèmes avec la commande suivante:

react-native bundle --platform Android --entry-file index.js --bundle-output Android/app/src/main/assets/index.Android.bundle --dev false --reset-cache --assets-dest Android/app/src/main/res/
8
Ansal Ali

Une autre solution pour le même problème d'actifs non intégrés dans le développement.

Ajoutez la ligne suivante à votre app/build.gradle fichier dans la section project.ext.react:

project.ext.react = [
    ... other properties
    bundleInDebug: true // <-- add this line
]

À partir des documents dans le fichier de notes du projet de démarrage:

Par défaut, bundleDebugJsAndAssets est ignoré, car en mode debug/dev, nous préférons charger le bundle directement depuis le serveur de développement.

2
Kat