2
votes

Image non affichée dans mon projet React native

Je démarre React Native et travaille avec Visual Studio Code.

Le composant Image ne fonctionne pas, j'ai aimé ça mais l'image d'arrière-plan n'est pas affichée.

"dependencies": {
    "react": "^16.8.6",
    "react-native": "^0.60.0",
    "react-native-grid-view": "https://github.com/lucholaf/react-native-grid-view.git",
    "react-native-i18n": "^2.0.15",
    "react-native-numeric-input": "^1.8.0",
    "react-native-scalable-image": "https://github.com/ihor/react-native-scalable-image.git",
    "react-native-tabbar-bottom": "^1.0.4",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "https://github.com/Maxeh/react-navigation.git",
    "rn-viewpager": "https://github.com/zbtang/React-Native-ViewPager.git"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "^16.8.6"
  },

J'ai essayé dans de nombreux cas, mais je ne trouve pas de réponse claire.

<Image source={require('../../assets/esse_group_back.png')} style={styles.imgBack} />

Le code ci-dessus ne fonctionne pas, veuillez m'aider.

Mes dépendances sont les suivantes. p>

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, Text, Dimensions, Image} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import GLOBAL from '../../global';
import I18n from '../../i18n'

var { width, height } = Dimensions.get('window');

export default class EsseGroupScreen extends Component {

  render() {
    return(
      <View style = {styles.container}>
        {this.renderHeader()}
        <Image source={require('../../assets/esse_group_back.png')} style={styles.imgBack} />
      </View>
    )
  }

  renderHeader() {
    return(
        <View style={styles.header}>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    backgroundColor: 'white'
  },
  imgBack: {      
    flex: 1,
    alignSelf: 'stretch',
    width: width,
    height: height-50,
    resizeMode: 'contain'
  }
});

react-native

0 commentaires

4 Réponses :

1
votes

Le problème vient de votre chemin d’image. Vous indiquez un chemin incorrect vers la source de l'image. J'ai essayé votre code avec mon dossier d'image et cela fonctionne très bien. Vérifiez simplement le chemin de l'image et remplacez-le par le chemin correct.

1 commentaires

EsseGroupScreen situé dans le dossier "src / components / about / company.js" et le chemin de l'image est "src / assets / esse_group_back.png" donc je pense que le chemin est correct.

0
votes

utilisez le code

import React, {Component} from 'react';
import {Dimensions,Image, StyleSheet, Text, View} from 'react-native';
var { width, height } = Dimensions.get('window');


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Image source={require('./assets/image/find.png')} style={styles.imgBack} />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    backgroundColor: 'white'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  imgBack: {
    tintColor:'red',
    alignSelf: 'stretch',
    width: width,
    height: height-50,
    resizeMode: 'contain'
  },
});

1 commentaires

./path_to_file signifie que le fichier / dossier est dans le même dossier.

0
votes

Compte tenu de la structure de vos dossiers comme celle-ci,

import esse_group_back from '../assets/esse_group_back.png'; //If your folder stucture something else try to change path, here `..` means parent folder of file

<Image source={esse_group_back} style={styles.imgBack} />

Vous pouvez le faire,

<Image source={require('../assets/esse_group_back.png')} style={styles.imgBack} /> //If your folder stucture something else try to change path, here `..` means parent folder of file

Ou plus simplifié,

XXX

0 commentaires

1
votes

La réponse est simple.

Vous pouvez utiliser le composant ImageBackground au lieu de Image

import { View, StyleSheet, TouchableOpacity, Text, Dimensions, ImageBackground} from 'react-native';

Importez également ImageBackground depuis react-native

<ImageBackground source={require('../../assets/esse_group_back.png')} style={styles.imgBack} />

1 commentaires

J'ai trouvé une autre réponse, la raison est flex: 1 dans le style de l'image. Après l'avoir supprimé, cela fonctionne bien même si j'utilise le composant Image.