React-Native Imageネットワークピクチャのロード時にワイドに設定したかロードに失敗したか

3028 ワード

最近React-Nativeを勉強して出会ったピクチャーのロードに失敗する問題
使用するRN環境バージョン
react-native-cli: 2.0.1 react-native: 0.55.0
React-NativeでImageコンポーネントを使用して画像を表示するには、次の2つの方法があります.
  • この地図リソースファイル
  • をロードする.
  • ネットワークピクチャリソース
  • をロードする
    1つ目の方法:
    source={require('./images/banner_01.jpg')}/>

    この方法は言うまでもなく、Androidがローカルリソースをロードするのと似ていて、ローカルピクチャパスを設定すればいいのです.
    第2の方法
    <Image
         source={{uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523263433771&di=69de72629c923496ba4efd58d301e62d&imgtype=0&src=http%3A%2F%2Fp1.meituan.net%2Fdeal%2F816b8c1664ef6ddad2d2c991d10ad1e3165800.jpg'}}
         style={myStyle.banner_pic}/>

    この方法は、ネットワークピクチャをロードし、urlアドレスを指定します.ここで、ピクチャパスを定義するときにリソース識別子uriがurlではありません.
    また、ネットワークピクチャをロードする場合は、imageコンポーネントに幅と高さのスタイルを設定する必要があります.そうしないと、ロードできません.
    以上は正常に画像をロードする方法で、RN公式サイトからもらった方法でもあります.以下、私が出会った穴についてお話しします.私は練習中にネットワーク画像リソースをロードします.私はAndroidデバイステストを使っています.私が使っている上のネットワークロードの方法は、ロードできません.エラーも報告しません.インターネットで調べたところ、IOS 9以上の画像リソースリンクがhttpであれば正常に表示されるとのことでしたが、httpのリンクであればinfoというlistファイルの設定をしなければなりません.Androidの解決策が見つからないので、このような考え方でhttpの画像リソースを1枚探して載せてみましたが、結果はよかったです.Androidも配置が必要なようですが、場所が見つからなかっただけです.見つけた友达に分かち合ってほしいです.ありがとうございます.
    まとめ
    ネットロード画像の注意点に重点を置いて
    1、uriはurlではありません;2、画像のサイズを設定しなければならない3、画像リンクはhttp(Android)でなければならない