Android React Nativeが画像リソースをロードする正しい姿勢

この記事ではAndroid React Nativeの使用の詳細について画像の使用についても言及し、どの方法でもapp内部の画像リソースをロードできないという問題についても言及していますが、当時のコードはこのようなものでした

公式ドキュメントにもこのように書かれているImageここでは画像の説明を書きますが、別のページドキュメントでは矛盾しています.Imagesは、このドキュメントに参加したばかりで、ここで画像の説明を書きます.つまり、正しいapp内部の画像のロード姿勢は次のようになると思います.

もちろん、画像はresのdrawableディレクトリの下に存在し、uriに対応する画像名には接尾辞が含まれていないことを覚えておいてください.これにより、画像が正しくロードされ、表示されます.この文章では、静的ピクチャリソースのロードについても言及しています(この方法はまだ問題があり、ロードできません).私はindexにいます.android.jsは同じディレクトリの下にiconという名前のものを捨てた.pngのピクチャは、その後、この方法でロードされます.

その結果、画像はロードされませんでしたが、エラーも報告されませんでした.一応気にしないで、どうせ今のバージョンはまだ安定していないから、正式に安定してからにしよう.とにかく今React Nativeを学ぶのは穴を埋める過程です.また、携帯電話のメモリーカードの画像リソースをロードする場合は、sdcardルートディレクトリのiconをロードすると簡単です.png.対応するコードは以下の通りです.

file://ファイルを追加したパス/sdcard/iconが表示されます.pngをロードするには、もちろん対応する権限を追加する必要があります.これで画像が正しくロードされます.ネットのピクチャーは言わないで、前の文章の中ですでに言及しました

つまり、これまで静的リソースがロードできなかったのもバグであり、将来のバージョンでは必ず修復されるので、一時的な解決方法はhttps://github.com/WoLfulus/react-native/commit/33e2d052b6e2e3e6b3595572abbc3cb9b66d5755node_を開くmodules\react-native\Libraries\Image\resolveAssetSource.jsファイル、

function getScaledAssetPath(asset) {
  var scale = pickScale(asset.scales, PixelRatio.get());
  var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
  var assetDir = getBasePath(asset);
  return assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
}

次のように変更

function getScaledAssetPath(asset) {
  var scale = pickScale(asset.scales, PixelRatio.get());
  var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
  var assetDir = getBasePath(asset);
  //return assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
   var imagePath = assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
  if (imagePath[0] == "/" || imagePath[0] == "\\") {
      imagePath = imagePath.substr(1);
  }
  return imagePath;
}

この時君が使う

静的ピクチャリソースを正常にロードして表示できます.文章を書く時、React Native Androidのバージョンは0.14.2で、開発環境はwin 7 X 64で、近い将来、これらの問題は一つ一つ修復されると信じています.