React-native：图片未在Android设备中显示;但在模拟器中完美展示

Question

我正在研究一个示例反应原生项目。几乎除了<Image source=''/>之外的所有功能都能很好地适应它。该图像显示在android studio和genymotion提供的android模拟器中，但不适用于任何真实设备（moto G3 turbo，nexus 5，galaxy s4等...）。我不知道我的代码出了什么问题。这是我的代码

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版本：react-native：0.32.1

Answer 1

问题出在我的捆绑包装命令上。正如@luwu在评论中所说，我检查了this，并惊讶地发现与我的没有任何区别。然后，只有在运行命令时我注意到了一条消息

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

由于已经在assets文件夹中创建了bundle，因此该消息有点令人困惑。该消息中的“资产”实际上表示我的图像。我用以下命令解决了这些问题：

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/