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

未捆绑在开发中的同一资产问题的另一种解决方案。

app/build.gradle将以下行添加到您的文件部分project.ext.react：

project.ext.react = [
    ... other properties
    bundleInDebug: true // <-- add this line
]

从入门项目 gradle 文件中的文档：

默认情况下， bundleDebugJsAndAssets 被跳过，因为在调试/开发模式下，我们更喜欢直接从开发服务器加载包。

Answer 2

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

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

由于已经在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/