React-native: Images not displayed on an Android device but it shows great in the emulator

Question

I am working on a sample reaction from a native project. And almost all functions except <Image source=''/>work well with it. The image is clearly visible in the Android emulator that comes with Android Studio and Genymotion, but it doesn’t work on any real devices (moto G3 turbo, nexus 5, galaxy s4, etc ...). I do not 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);

project structure:

React-native version: response-native: 0.32.1

Answer 1

. @luwu , , .

" , ..."

, . "" . :

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/

Answer 2

, .

app/build.gradle project.ext.react:

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

Gradle :

bundleDebugJsAndAssets , / .