时间戳

首页 > 解决方案 > 我的项目中未显示的图像反应原生

react-native - 我的项目中未显示的图像反应原生

问题描述

我正在启动 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"
  },

标签： react-native

解决方案

问题在于您的图像路径。您提供的图像源路径不正确。我用我的图像文件夹尝试了你的代码，它工作正常。只需检查图像路径并替换为正确的路径。

推荐阅读