web-dev-qa-db-ja.com

React-native：Androidデバイスでは表示されないが、エミュレータでは完全に表示される

私はサンプルのネイティブプロジェクトの反応に取り組んでいます。そして、<Image source=''/>以外のほとんどすべての機能がうまく機能します。画像はAndroidAndroidスタジオとgenymotionで提供されるエミュレータでよく表示されますが、実際のデバイスでは動作しません（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);

プロジェクト構造：

enter image description here

反応ネイティブバージョン：反応ネイティブ：0.32.1

androidimageandroid-emulatorreact-native
15
Ansal Ali

問題は、私のバンドルパッケージコマンドにありました。 @luwuが彼のコメントで言ったように、私は this をチェックしましたが、私のものとの違いがないことに驚きました。次に、コマンドの実行中にメッセージに気づいただけです

「アセットの宛先フォルダが設定されていません。スキップします...」

バンドルが既にアセットフォルダに作成されているため、このメッセージは少し混乱しました。そのメッセージの「アセット」は実際に私の画像を示しています。そして、私は次のコマンドで問題を解決しました：

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/
8
Ansal Ali

開発にバンドルされていないアセットの同じ問題に対する別の解決策。

セクションapp/build.gradleのproject.ext.reactファイルに次の行を追加します。

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

スタータープロジェクトグラドルファイルのドキュメントから：

デフォルトでは、bundleDebugJsAndAssetsはスキップされます。デバッグ/開発モードでは、開発サーバーから直接バンドルをロードすることを好みます。

2
Kat