Question

我正在启动React Native并使用Visual Studio Code。

图像组件无法正常工作，我确实喜欢这样，但是未显示背景图像。

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'
  }
});

我尝试了很多情况，但找不到明确的答案。

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

以上代码无效，请谁帮我。

我的依从关系如下。

"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"
  },

Answer 1

问题出在您的图像路径上。您提供了错误的图像源路径。我在您的图片文件夹中尝试了您的代码，并且效果很好。只需检查图像路径并替换为正确的路径即可。

Answer 2

使用代码

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'
  },
});

Answer 3

答案很简单。

您可以使用ImageBackground组件代替Image

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

还可以从react-native导入ImageBackground

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

Answer 4

考虑这样的文件夹结构，

--project
  --src folder
    --assets folder
      --esse_group_back.png file
    --Some folder
      --EsseGroupScreen.js file
    --App.js file
    --index.js file

您可以这样做

<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

或更简化，

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

我的项目中未显示的图像反应本机

4 个答案: