React-native:图片未在android设备中显示；但在模拟器中显示完美 [英] React-native: Images not showing in android device; but shows perfectly in emulator

问题描述

我正在研究一个示例React Native项目.几乎所有功能(<Image source=''/>除外)都可以正常使用.该图像在android studio和genymotion随附的android模拟器中显示良好，但不适用于任何实际设备(moto G3 turbo，nexus 5，galaxy s4等).我不知道我的代码出了什么问题.这是我的代码

I am working on a sample react native project. And almost all features except the <Image source=''/> work well with it. The image shows well in android emulator supplied with android studio and genymotion, but does not work on any real devices (moto G3 turbo, nexus 5, galaxy s4 etc...). I don't know what went wrong with my code. Here is my 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);

项目结构:

本机版本:react-native:0.32.1

React-native version : react-native: 0.32.1

推荐答案

问题出在我的捆绑包装命令上.正如@luwu在他的评论中所说，我检查了此，感到惊讶的是，这与我的没有区别.然后只有我在运行命令时才注意到一条消息

The problem was with my bundle packaging command. As @luwu said in his comment, I checked this, and surprised that there is no difference with mine. Then only I noticed a message while running the command

未设置资产目标文件夹，正在跳过..."

"Assets destination folder is not set, skipping..."

由于已在资产文件夹中创建捆绑包，因此该消息有点令人困惑.该消息中的资产"实际上表示我的图像.我使用以下命令解决了问题:

That message was bit confusing since bundle was already created in the assets folder. The 'Assets' in that messages actually indicates my images. And I solved the issues with the following command:

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/

这篇关于React-native:图片未在android设备中显示；但在模拟器中显示完美的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！