Fresco: を使用した低画質<image/> RNのコンポーネント&gt; = 0.57（Fresco&gt; = 1.10.0）

ねえ、最近この問題に関する活動はなかったようです。 問題は修正されましたか、それともコミュニティの注意が必要ですか？ それ以上のアクティビティが発生しない場合、この問題は解決される可能性があります。 この問題に「バグ」または「拡張」というラベルを付けることもできます。この問題は開いたままにしておきます。 貢献していただきありがとうございます。

RN 0.56.0および0.57.1​​で使用されているFrescoのバージョンは何ですか？ これにより、これを引き起こした可能性のあるコミットの数が絞り込まれます。

こんにちは@oprisnik 、

https://github.com/facebook/react-native/issues/21301#issuecomment -520155609が正確に報告していると思い。どのバージョンからこの動作が変更されました。

こんにちは@clytras 、私はこのリポジトリの画面に画像を見つけました。
写真をダウンロードすると、2111（幅）* 4645（高さ）の写真が見つかりました。

Frescoは、OpenGLの制限に合うように画像をダウンサンプリングします。デフォルトの画像の最大幅/高さは、この行のハードコードです。

私の意見では、
簡単な方法は、ResizeOptionのmaxBitmapSizeフィールドを変更することです。
正しい方法は、非常に大きな画像を表示するためにFrescoを使用しないことです。

他のウィジェットを作成し、このライブラリを使用して非常に大きな画像を表示することは、多くのAndroidチームの選択です。

こんにちは@ s1rius 、あなたが未解決の問題の投稿を読ん

コードは単純な画像です画像サイズは2111x4645ピクセルです

これは、RN> = 0.57から発生し、Fresco1.9.0から1.10.0に変更された動作の変更に関するものです。 そのような大きな画像は、そのバージョンの前にフル品質で動作し、読み込まれていました。 RN repoの寄稿者は、これはRNの問題ではなく、Fresco libの問題であると述べているため、この問題をクローズしました。 その行動的な変更が意図的に行われた場合は、この問題を解決できます。 はい、回避策はありますが、これはバージョンまで機能していましたが、突然、理由に関する情報がなく、機能しなくなりました。

ねえ、最近この問題に関する活動はなかったようです。 問題は修正されましたか、それともコミュニティの注意が必要ですか？ それ以上のアクティビティが発生しない場合、この問題は解決される可能性があります。 この問題に「バグ」または「拡張」というラベルを付けることもできます。この問題は開いたままにしておきます。 貢献していただきありがとうございます。

長期間使用されなかった後、この問題を解決します。 この問題が最新リリースでも引き続き発生する場合は、最新情報を使用して再開してください。

これを引き起こした可能性のある潜在的な変更は、 https：//github.com/facebook/fresco/commit/fa71901055a38a810c190862c7fd582fd3dad2b3です

それが問題のある変更であるかどうかを確認できますか？

こんにちは@oprisnikそしてこれを調査してくれてありがとう。

私はgradleと、ライブラリをダウンロードする代わりにソースから直接フレスコ画をコンパイルするようにRNを変更する方法にあまり詳しくありません。 私が成功せずに取ったステップ：

1. react-native-cliを使用してRN0.57プロジェクトを作成します
2. frescolibをプロジェクトのルートディレクトリにクローンします
3. fresco lib内のv1.10.0ブランチへのチェックアウト
4. android-ndk-r20パスを<Project>\android\local.properties （ ndk.dir=G:\\Dev\\Android\\android-ndk-r20 ）に追加します

次に、SO https://stackoverflow.com/a/52861379/1889685でこの回答を見つけました。これは、ソースからフレスコ画を使用してRNをコンパイルし、ライブラリをオーバーライドします。

cd android
./gradlew assembleDebug --include-build /e/Sandbox/RN057ImageTest/fresco/

しかし、次のエラーが発生します。

> Task :fresco:imagepipeline:ndk_build_bitmaps FAILED
A problem was found with the configuration of task ':fresco:imagepipeline:ndk_build_bitmaps'. Registering invalid inputs and outputs via TaskInputs and TaskOutputs methods has been deprecated and is scheduled to be removed in Gradle 5.0.
 - File 'E:\Sandbox\RN057ImageTest\fresco\imagepipeline\src\main\jni\bitmaps' specified for property '$1' is not a file.

@sunnylqmは、このプロセスに非常に精通しているため、時間があればこれをテストできるかもしれませ

それが役に立ったら、私はこれまでに持っているものでリポジトリを作成することができます。

ねえ、最近この問題に関する活動はなかったようです。 問題は修正されましたか、それともコミュニティの注意が必要ですか？ それ以上のアクティビティが発生しない場合、この問題は解決される可能性があります。 この問題に「バグ」または「拡張」というラベルを付けることもできます。この問題は開いたままにしておきます。 貢献していただきありがとうございます。

ビルドしようとしましたが、ndkエラーも発生しました。 テストできるナイトリービルドはありますか？

変更を加えずにv2.0.0をコンパイルできるので、別の方法で検証してみました。 上記のコミットによって有効になるダウンサンプリングを無効にしました。結果は次のとおりです。

テスト画像URI：
" https://wagonsclub.oss-cn-beijing.aliyuncs.com/static/carousel/carousel1_bg.jpg "

Fragment_drawee_simple.xml

  <com.facebook.drawee.view.SimpleDraweeView
      android:id="@+id/drawee_view"
      android:layout_width="match_parent"
      android:layout_height="1000dp"
      />

オリジナルのv2.0.0ショーケース

ダウンサンプリングv2.0.0ショーケースを無効にしました

@sunnylqmこれをデバッグしてくれてありがとう。 ダウンサンプリングを無効にするにはどうすればよいですか？ 次の方法を試しましたが、成功しませんでした。

MainApplication.java onCreate ：

<strong i="10">@Override</strong>
public void onCreate() {
  super.onCreate();

  ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)
    .setDownsampleEnabled(false)
    .build();

  Fresco.initialize(this, config);

  SoLoader.init(this, /* native exopackage */ false);
}

これにより、LogcatでFrescoがすでに初期化されているというメッセージが表示されます。

MainReactPackageをMainPackageConfig初期化して使用した2番目の方法ですが、どちらも機能しませんでした。

protected List<ReactPackage> getPackages() {
  Context context = getApplicationContext();
  ImagePipelineConfig pipelineConfig = ImagePipelineConfig
    .newBuilder(context.getApplicationContext())
    .setDownsampleEnabled(false)
    .build();
  MainPackageConfig config = new MainPackageConfig.Builder().setFrescoConfig(pipelineConfig).build();

  return new ArrayList<>(Arrays.<ReactPackage>asList(
    new MainReactPackage(config),
    new ReactNativeFirebaseAppPackage(),
    new FastImageViewPackage(),
    new RNGestureHandlerPackage(),
    new ReanimatedPackage(),
    new SvgPackage()
  ));
}

@clytrasわからない。 ソースコードで無効にしました。

ping @oprisnik

これは、React Nativeメインパッケージ構成を介して設定されているようです： https ：

RNでどのように設定する必要があるのか​​わからないので、試したことはありません。

@oprisnikこの問題を修正する計画はありますか？

この問題はまだRNリポジトリに属していると思います。 画像のダウンサンプリングは、間違いなく、メモリコストを削減し、効率を高め、大きな画像をロードする際の煩雑さを軽減するためのものです。 この問題は、エンド開発者がオプション/プロパティの形式で画像のダウンサンプリングを行うかどうかを選択できるように、RNによって処理される必要があると思います。 たとえば、いくつかの平面図を表示するために大きな画像を使用する私のアプリでは、ユーザーが平面図を拡大するときに高解像度が必要です。 私は常にデバイスの機能をチェックし、RAMが少ない、または低解像度のローエンドデバイスの場合は、より小さく、より低い解像度の画像をロードします。

scaleとresizeを持つscale <Image/>コンポーネントのresizeMethodプロパティがあります。 RN currenltyは、そのプロパティのscale値を尊重しません。これは、画像のダウンサンプリングを無効にし、 resizeに設定した場合にのみ有効にする必要があると思います。

resizeMethod

画像のサイズが画像ビューのサイズと異なる場合に画像のサイズを変更するために使用する必要があるメカニズム。 デフォルトはautoです。

resize ：デコードされる前にメモリ内のエンコードされた画像を変更するソフトウェア操作。 画像がビューよりもはるかに大きい場合は、 scale代わりにこれを使用する必要があります。

scale ：画像は縮小または拡大されて描画されます。 resizeと比較して、 scaleはより高速で（通常はハードウェアアクセラレーション）、より高品質の画像を生成します。 これは、画像がビューよりも小さい場合に使用する必要があります。 画像がビューより少し大きい場合にも使用する必要があります。

この@ oprisnik

@clytrasあなたが言ったように、それは説明なしのフレスコ画の振る舞いの変化です。 （私が示すデモはフレスコレポのサンプルアプリです）したがって、RNとは何の関係もないと思います。

@sunnylqmもちろん、これは説明のないフレスコ画の動作の変更ですが、RNは、このフレスコ画機能の有効化/無効化の選択を

また、この動作の変更はもちろんiOSでは発生しないことを忘れないでください。そのため、何かを行う必要があります。フレスコ画の構成はReact Nativeで行われるため、この構成はエンドRN開発者に公開する必要があると思います。

ところで、私はFresco 2.0.0（マスターブランチ）を最新のRN 0.61.2でコンパイルし、 コメントアウトすることでダウンサンプリングを無効にしました。

frescoリポジトリディレクトリ内にlocal.propertiesファイルを作成し、 Windows64ビット

ndk.dir=G:\\Dev\\Android\\android-ndk-r19c
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

Frescoバイナリは正常にコンパイルされ、次を実行してビルドされたRNアプリのイメージダウンサンプリングが無効になっています。

cd android
.\gradlew assembleDebug --include-build ..\fresco\

そうです、これに対する解決策は、RN初期化ロジックを介して、またはFrescoが初期化されるときに、アプリケーションのダウンサンプリングを無効にすることです。

@oprisnikでは、生成されたandroidプロジェクト内でフレスコ画を初期化するためのより良いクリーンで簡単な方法が必要だと思います。これは私が試したどの方法でも達成できませんでした。 いくつかのプロジェクトがcom.facebook.imagepipeline.core.ImagePipelineConfig 、 com.facebook.react.shell.MainReactPackage 、 com.facebook.react.shell.MainPackageConfigを使用して、設定をMainReactPackageに渡すことにより、 getPackagesメソッド内で初期化するのを見てきましたが、これは、私が試した最新のRN0.61でもRN0.57でも機能しませんでした。

protected List<ReactPackage> getPackages() {
  Context context = getApplicationContext();

  ImagePipelineConfig pipelineConfig = ImagePipelineConfig
    .newBuilder(context.getApplicationContext())
    .setDownsampleEnabled(false)
    .build();

  MainPackageConfig config = new MainPackageConfig.Builder()
    .setFrescoConfig(pipelineConfig)
    .build();

  return new ArrayList<>(Arrays.<ReactPackage>asList(
    new MainReactPackage(config),
    ...
  ));
}

たぶん私はそこで何か間違ったことをしているのですが、 MainReactPackageは<project>/android/app/build/generated/rncli/src/main/java/com/facebook/react/ディレクトリ内にPackageList.javaファイルを生成する新しい> = 0.60リンクシステムでは間違いなく機能しませんMainReactPackage引数なしで渡され、自動リンクシステムを使用してどのような種類の引数も渡す方法がわかりませんが、frescoconfigを使用してMainReactPackageを手動で渡してみましたが、それも機能しませんでした。

React Native用に生成されたAndroidプロジェクト内で、カスタム構成を使用してfrescolibを初期化する方法についてのクリーンで文書化された方法が必要です。

https://frescolib.org/docs/resizing.htmlを読んだ後、私が正しく理解していれば、 downsamplingはresizing代わりになります。 したがって、 @ clytrasは正しいと思います。resizeMethodがscaleに設定されている場合、ダウンサンプリングは有効になりません。

RNのコードは私には正しいようですhttps://github.com/facebook/react-native/blob/aee88b6843cea63d6aa0b5879ad6ef9da4701846/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java#L505 （ null値をimagepipelineに渡します。これは、サイズ変更/ダウンサンプリングがないことを示します）
しかし、フレスコ画では、nullのresizeOptionsを尊重しませんhttps://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158- L169
downsampleEnabledとdownsampleEnabledForNetwork両方がtrueの場合、resizeOptionsがnullであるかどうかに関係なく、ダウンサンプリングされます。
https://github.com/facebook/fresco/blob/master/imagepipeline-base/src/main/java/com/facebook/imagepipeline/transcoder/DownsampleUtil.java#L56
ですから、私にはドキュメントとコードの不一致のようです。 また、特定の画像をダウンサンプリングするかどうかを制御するためのより柔軟な方法が必要です。 （現在は2つのグローバル構成によって制御されています） @clytras @oprisnik

@sunnylqmでお疲れ様でした。 私は<Image/>コンポーネントのRN構成を探して追跡し始め、それらをチェックしましたが、あなたは私を超えました！

このような動作の変化があるので、どちらのフレスコもresizeOptionsがnullでない場合にのみ、ダウンサンプリングをチェックして適用する必要があると思います。 これは、 resizeMethodがresize （またはautoおよびローカル画像の場合）に設定されている場合にのみ設定され、 https：//github.com/facebook/react-でチェックされshouldResize関数、または新しいresizeMethod列挙型があるはずです特にダウンサンプリングのオプション。

ねえ、最近この問題に関する活動はなかったようです。 問題は修正されましたか、それともコミュニティの注意が必要ですか？ それ以上のアクティビティが発生しない場合、この問題は解決される可能性があります。 この問題に「バグ」または「拡張」というラベルを付けることもできます。この問題は開いたままにしておきます。 貢献していただきありがとうございます。

@clytrasあなたはあなたの解決策を教えてもらえますか？

@ club9822今のところ解決策は、ここで説明するように、最初に画像のダウンサンプリングを無効にした後、ソースからフレスコバイナリをコンパイルすることですhttps://github.com/facebook/fresco/issues/2397#issuecomment -541802753

コアライブラリを再コンパイルせずにこれを回避する方法はありますか？

@CaptainNこの問題の簡単な解決策はありません。 ソースをコンパイルするプロセスは困難で退屈に見えるかもしれませんが、実際にはいくつかの小さな変更を加えてコマンドを実行する必要があります。 この号の私の投稿をフォローして、その方法を確認してください。

@clytras new PackageList(this, config) 2番目の引数でconfigを渡すことができます
そして、実際に期待通りに動作してみました。 問題は、ここのロジックが構成を無視したことですhttps://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 - false場合はL169
こんな感じでしょ？

- if (mDownsampleEnabled || !statusHasFlag(status, Consumer.IS_RESIZING_DONE))
+ if (mDownsampleEnabled && !statusHasFlag(status, Consumer.IS_RESIZING_DONE))

@oprisnik

@sunnylqm私はオフィスを離れており、今は確認できませんが、新しい_RN> = 60_自動リンクシステムを使用して構成を渡す方法が見つからなかったことを覚えています。 でもわかりません。 古い_RN_バージョンでも機能しませんでした。 休暇から戻った数日後にチェックします。

私はそれがステータスがいない場合は、今ダウンサンプリングは常に適用されることは明白だとして、問題を解決することをORして、変更信じIS_RESIZING_DONE 、それは完全にバイパスしてフラグをmDownsampleEnabled 。 もちろん、ダウンサンプルを無効にするカスタムフレスコ設定が適用されてフレスコに渡された場合も同様です。

@clytrasgradleの非推奨などであらゆる種類のエラーが発生します。 ビルド前のバイナリを作成できる（そしてインストールする場所を教えてください）可能性はありますか？ 本当にありがたいです。

ああ、それを忘れてください。 尋ねるのも失礼です。 私はそれを理解し、多分PRに入れます。

@CaptainNそれは失礼ではありません。 問題は、私がそれを実行し、すべてのエラーに直面したことです。そのため、Frescoのインストールとパッチの適用方法の説明を含むスターターリポジトリを作成するのにかかる時間ははるかに短くなります。

だからここにあります： https ：

RN 0.61.5ます。 リポジトリには詳細な手順があります。 Frescoのクローンを作成し、 v2.1.0をチェックアウトし、 DecodeProducer.javaパッチを適用して、ダウンサンプルコードをコメントアウトします。 Android NDKをダウンロードして、 libraries/fresco/local.propertiesファイルを追加するだけです。 それはすべてreadmeで詳しく説明されています。

指示とyarnスクリプトに従うと、既存のRN> = 0.60（_または古いバージョン_）プロジェクトにfrescolibを追加できます。

@clytrasそれを

上記のコメントが将来この問題に対処するかどうかについて何か言葉はありますか？

@sunnylqmが提案した変更をテストしました：

- if (mDownsampleEnabled || !statusHasFlag(status, Consumer.IS_RESIZING_DONE))
+ if (mDownsampleEnabled && !statusHasFlag(status, Consumer.IS_RESIZING_DONE))

その変更後、 MainApplication.java内の構成だけを使用してイメージのダウンサンプルを無効にできたことがわかりました。つまり、フレスコ画をコンパイルする必要はなく、そこでフレスコ画の設定を変更するだけで済みます。

<strong i="12">@Override</strong>
protected List<ReactPackage> getPackages() {
  Context context = getApplicationContext();

  ImagePipelineConfig frescoConfig = ImagePipelineConfig
    .newBuilder(context)
    .setDownsampleEnabled(false)
    .build();

  MainPackageConfig appConfig = new MainPackageConfig
    .Builder()
    .setFrescoConfig(frescoConfig)
    .build();

  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this, appConfig).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  return packages;
}

その1回の変更後、上記の構成コードが機能し、ダウンサンプリングが無効になります。 その構成を.setDownsampleEnabled(true)を設定すると、ダウンサンプルが適切に有効になります。 それは私にはバグのように見えます@oprisnik。 もちろん、私にとって理想的なのは、RNがresizeMethodを尊重し、動的にダウンサンプリングを適用することですが、それが可能かどうかはわかりません。

編集

実際、私は部分的に間違っていました。 その変更（_これは完全に理にかなっています_）で、RNは.setDownsampleEnabled(false)を設定します。これは、 ReactAndroid / src / main / java / com / facebook / react / modules / fresco / FrescoModule.java＃L155で確認できます。ダウンサンプリングを有効にするには、上記のコードでフレスコ画を構成し、 .setDownsampleEnabled(true)を設定する必要があります。 RNではデフォルトでダウンサンプリングが無効になっています。

@ clytras @ CaptainNこの問題にご協力いただきありがとう

react-native-cli：2.0.1
反応ネイティブ：0.61.2

小さなアップデート。 私は長い間この問題に遭遇していません。 しかし、これは、ほとんどの画像で同じ画像の3つの異なるスケール（ @ 1x 、 @ 2x 、@ 3x）を使用するように切り替えたためかどうかはわかりません。

@enguerranwsExpoを使用した経験はまったくありません。 @gorvinsky RN 0.61.5を使用してテストしたところ、機能しません。 残念ながら、バンドルされた画像サイズは機能しませんでした。 私がこの問題に最初に直面したとき、それは私が最初にテストしたものでした。

RN0.61.5プロジェクトとソースからFrescoをビルドするために必要な変更を含むreact-native-community / cliテンプレートを作成しました。 これは、カスタムプロジェクト名と、ソースからFrescoをコンパイルするために必要な変更を使用して、新しいRNプロジェクトを作成するための簡単で迅速な方法です。 また、 Android NDK Revision 21を使用しており、 yarn 1.21を使用してmacOSとWindowsでテストしました。

Githubリポジトリ： clytras / react-native-fresco
NPMテンプレート： @ lytrax / react-native-fresco

次のようにインストールできます。

npx @react-native-community/cli<strong i="17">@next</strong> init --template=@lytrax/react-native-fresco <ProjectName>

READMEに詳細なインストール手順がありyarn fresco-setupを使用してFrescoのクローンを作成/パッチを適用してから、Android NDKをインストールし、Android NDKパスを使用してandroid/libraries/fresco/local.propertiesを作成する必要があります。

このコミットはreact-nativeでこれを修正していますか？ （現時点ではリリースされていません）

https://github.com/facebook/react-native/commit/f535c8b4bb4474ffe0a0765270cbca8d839deca8

説明では、「setDownsampleEnabled」属性を持つPipelineConfigを渡すことができると書かれています。

https://frescolib.org/docs/configure-image-pipeline.html

@enguerranwsExpoを使用した経験はまったくありません。 @gorvinsky RN 0.61.5を使用してテストしたところ、機能しません。 残念ながら、バンドルされた画像サイズは機能しませんでした。 私がこの問題に最初に直面したとき、それは私が最初にテストしたものでした。

RN0.61.5プロジェクトとソースからFrescoをビルドするために必要な変更を含むreact-native-community / cliテンプレートを作成しました。 これは、カスタムプロジェクト名と、ソースからFrescoをコンパイルするために必要な変更を使用して、新しいRNプロジェクトを作成するための簡単で迅速な方法です。 また、 Android NDK Revision 21を使用しており、 yarn 1.21を使用してmacOSとWindowsでテストしました。

Githubリポジトリ： clytras / react-native-fresco
NPMテンプレート： @ lytrax / react-native-fresco

次のようにインストールできます。

npx @react-native-community/cli<strong i="18">@next</strong> init --template=@lytrax/react-native-fresco <ProjectName>

READMEに詳細なインストール手順がありyarn fresco-setupを使用してFrescoのクローンを作成/パッチを適用してから、Android NDKをインストールし、Android NDKパスを使用してandroid/libraries/fresco/local.propertiesを作成する必要があります。

既存のプロジェクトに実装する方法はありますか？

@kalmahik
この方法を試してください。 （私のRNはv0.61.4です）
これは、 @ clytrasのパッチを既存のプロジェクトに適用する方法です。
そして、それはもうアンドロイドシミュレーターを実行することができません。 私は常に実際のデバイスでテストしています。 😢

1. package.jsonにスクリプトを追加します

"fresco-clone": "git clone https://github.com/facebook/fresco.git android/libraries/fresco && cd android/libraries/fresco && git checkout tags/v2.1.0",
"fresco-patch": "yarn file-patch ./patches/DecodeProducer.java.diff android/libraries/fresco/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java",
"fresco-setup": "yarn fresco-clone && yarn fresco-patch"

1. パッチ/DecodeProducer.java.diffを作成します

「毛糸フレスコパッチ」

結果

@@ -7279,32 +7279,35 @@

+// 
 if (mDownsampleE
@@ -7381,24 +7381,27 @@

+// 
   ImageReque
@@ -7460,24 +7460,27 @@

+// 
   if (mDowns
@@ -7513,24 +7513,27 @@

+ //
        %7C%7C !U
@@ -7587,36 +7587,39 @@

+//

+ 
 encodedImage.set
@@ -7637,32 +7637,35 @@
 %0A               
+ //
          Downsam
@@ -7700,32 +7700,35 @@
 %0A               
+ //
              req
@@ -7762,32 +7762,35 @@

+// 
             requ
@@ -7820,32 +7820,35 @@
 %0A               
+ //
              enc
@@ -7866,32 +7866,35 @@

+// 
             maxB
@@ -7914,32 +7914,35 @@

+// 
   %7D%0A            
@@ -7937,32 +7937,35 @@

+// 
 %7D%0A%0A             
@@ -7962,24 +7962,27 @@

+ //
  if (produce
@@ -8002,28 +8002,31 @@

+//

+ 
 .getImagePip
@@ -8050,24 +8050,27 @@

+ //
      .getExp
@@ -8091,24 +8091,27 @@

+ //
      .should
@@ -8151,24 +8151,27 @@

+// 
   maybeIncre
@@ -8206,32 +8206,35 @@
 %0A               
+ //
  %7D%0A%0A            

1. android /settings.gradleを編集します

追加includeBuild ('libraries/fresco')の前にinclude ':app'

rootProject.name = 'YOURPROJECT'
...
includeBuild ('libraries/fresco') 

include ':app'

1. android / build.gradle

Gradleの依存関係の使用は3.4.1です

dependencies {
  ...
  classpath("com.android.tools.build:gradle:3.4.1")
  ...
}

1. スクリプトを実行する

yarn fresco-setup

1. androidndkをダウンロード

r21バージョンを使用しました。

https://developer.android.com/ndk/downloads

1. ndkを解凍して移動します

NDKを解凍します
ndkをUsers/YOURNAME/Library/Android/android-ndk-r21に解凍しました
そして、プロジェクトにandroid/libraries/fresco/local.propertiesを作成します

ndk.dir=/Users/YOURNAME/Library/Android/android-ndk-r21
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

1. アンドロイドを実行します

それで全部です。

yarn androidそして大きな画質をチェックします。

@clytrasに感謝します

https://github.com/clytras/react-native-fresco

@JeffGuKang
file-patchコマンドとは何ですか？

これがマージされないようにしているのは何ですか？ 単に修正するのではなく、なぜこれらのパッチが必要なのですか（時間の制約だけではないと仮定すると、私は完全にそれを取得し、強引にしようとはしません）？

@kalmahik file-patchは、NPMパッケージのCLIパッチツールです。

@JeffGuKangテンプレート設定スクリプトが機能するために必要な変更をpackage.json含める必要があります。

@CaptainN上記のコミットをテストする時間はまだありませんでしたが、それほど単純ではないと思います。

@clytrasああ、この1 ？ どうも）

@kalmahik
この方法を試してください。 （私のRNはv0.61.4です）
これは、 @ clytrasのパッチを既存のプロジェクトに適用する方法です。
そして、それはもうアンドロイドシミュレーターを実行することができません。 私は常に実際のデバイスでテストしています。 😢

1. package.jsonにスクリプトを追加します

"fresco-clone": "git clone https://github.com/facebook/fresco.git android/libraries/fresco && cd android/libraries/fresco && git checkout tags/v2.1.0",
"fresco-patch": "yarn file-patch ./patches/DecodeProducer.java.diff android/libraries/fresco/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java",
"fresco-setup": "yarn fresco-clone && yarn fresco-patch"

1. パッチ/DecodeProducer.java.diffを作成します

「毛糸フレスコパッチ」

結果

@@ -7279,32 +7279,35 @@

+// 
 if (mDownsampleE
@@ -7381,24 +7381,27 @@

+// 
   ImageReque
@@ -7460,24 +7460,27 @@

+// 
   if (mDowns
@@ -7513,24 +7513,27 @@

+ //
        %7C%7C !U
@@ -7587,36 +7587,39 @@

+//

+ 
 encodedImage.set
@@ -7637,32 +7637,35 @@
 %0A               
+ //
          Downsam
@@ -7700,32 +7700,35 @@
 %0A               
+ //
              req
@@ -7762,32 +7762,35 @@

+// 
             requ
@@ -7820,32 +7820,35 @@
 %0A               
+ //
              enc
@@ -7866,32 +7866,35 @@

+// 
             maxB
@@ -7914,32 +7914,35 @@

+// 
   %7D%0A            
@@ -7937,32 +7937,35 @@

+// 
 %7D%0A%0A             
@@ -7962,24 +7962,27 @@

+ //
  if (produce
@@ -8002,28 +8002,31 @@

+//

+ 
 .getImagePip
@@ -8050,24 +8050,27 @@

+ //
      .getExp
@@ -8091,24 +8091,27 @@

+ //
      .should
@@ -8151,24 +8151,27 @@

+// 
   maybeIncre
@@ -8206,32 +8206,35 @@
 %0A               
+ //
  %7D%0A%0A            

1. android /settings.gradleを編集します

追加includeBuild ('libraries/fresco')の前にinclude ':app'

rootProject.name = 'YOURPROJECT'
...
includeBuild ('libraries/fresco') 

include ':app'

1. android / build.gradle

Gradleの依存関係の使用は3.4.1です

dependencies {
  ...
  classpath("com.android.tools.build:gradle:3.4.1")
  ...
}

1. スクリプトを実行する

yarn fresco-setup

1. androidndkをダウンロード

r21バージョンを使用しました。

https://developer.android.com/ndk/downloads

1. ndkを解凍して移動します

NDKを解凍します
ndkをUsers/YOURNAME/Library/Android/android-ndk-r21に解凍しました
そして、プロジェクトにandroid/libraries/fresco/local.propertiesを作成します

ndk.dir=/Users/YOURNAME/Library/Android/android-ndk-r21
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

1. アンドロイドを実行します

それで全部です。

yarn androidそして大きな画質をチェックします。

@clytrasに感謝します

https://github.com/clytras/react-native-fresco

@clytrasスクリプトに従ってソースからFrescoをコンパイルしようとすると、この問題に直面します。 既存のRN（v0.59.9）プロジェクトにコンパイルしています

また、Fresco ConfigをMainApplication.javaに追加しようとしましたが、うまくいきませんでした

@ ravali121これらの手順は、RN> = 0.60.x用であり、RN0.59以前のバージョン用ではありません。 古いバージョンのRNにパッチを適用できますが、手順とFrescoチェックアウトは、その特定のRNバージョンに付属しているバージョンに従う必要があります。 RN0.61のFresco2.1.0をチェックしていますが、RN 0.59のバージョンは異なり、もちろんパッチも異なりますが、パッチは必要ありません。コードの変更は、 DecodeProducer.java編集して手動で適用できます。 また、依存関係を処理するための追加のgradle構成があります。

0.59で動作させることはできますが、プロジェクトを少なくとも0.61（またはそれ以上）にアップグレードすることをお勧めします。

こんにちは！ マージするパッチのETAに関する更新はありますか？ （素晴らしい仕事をしてくれた@clytrasに感謝します。できるだけ早くパッチを試す必要がありますが、これが修正されるかどうか知りたいです）

@FRizzonelliパッチは回避策であり、実際には問題の修正ではありません。そのため、この問題は長い間開いたままになります。
パッチと@react-native-community/cliテンプレートを確認して、最新のRNバージョンにアップグレードする必要があります。

@clytras私は理解しています:(問題は今、Androidでこの問題が発生しているExpoでreact-native-webを使用して小さなPOCをセットアップしようとしています。小さなデモでは、排出したくないのですが。私はする必要があると思います:(

@clytras私は理解しています:(問題は今、Androidでこの問題が発生しているExpoでreact-native-webを使用して小さなPOCをセットアップしようとしています。小さなデモでは、排出したくないのですが。私はする必要があると思います:(

png代わりにjpg形式を使用するのはどうですか？ 問題を解決できるかどうかはわかりません。

@clytras私は理解しています:(問題は今、Androidでこの問題が発生しているExpoでreact-native-webを使用して小さなPOCをセットアップしようとしています。小さなデモでは、排出したくないのですが。私はする必要があると思います:(

png代わりにjpg形式を使用するのはどうですか？ 問題を解決できるかどうかはわかりません。

残念ながらどちらも機能しません。アルファレイヤーにはpngが必要です:(

RN0.63.4でも同じ問題があります。
960 x 13983の画像サイズはかなりダウンサンプリングされており、画像内のテキストはほとんど読めません。
680 X 2538の画像サイズもダウンサンプリングされていますが、かなりまともです。
Image.getSizeを使用して画像のサイズを調べ、そこから高さを計算しました（幅は100％）
画像はすべてjpgです。
@clytrasのメソッドをgradle3.5.4、NDK21.4.7075529で実行しました。 しかし、同じ問題。

        <Image
          style={{ width: SCREEN_WIDTH, height }}
          resizeMode="contain"
          source={{ uri }}
          resizeMethod="scale"
        />

FastImageで問題を解決しました。 お役に立てば幸いです。

 <FastImage
          style={{ width: SCREEN_WIDTH, height: height }}
          source={{
            uri: uri,
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.center}
 />

@JJMoonスタイルの画像サイズを変更したときに、FastImageで画像を強制的に再レン​​ダリングする方法を知っていますか。
画像は常に再レンダリングされますが、FastImageは再レンダリングされません。

こんにちは、ふたりとも、

私はこのスレッドから考えられるすべての解決策を試しましたが、RN0.64.2とFresco2.5.0を使用しました。
NDKv22.1.7171670とgradle4.2.1を使用しています。

私は現在、次のエラーで立ち往生しています（問題はandroid-emulatorに関連していますか？）：

E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
    Process: com.veerle.wiener.debug, PID: 10813
    java.lang.NoSuchMethodError: No static method initialize(Lcom/facebook/imagepipeline/core/ImagePipelineConfig;)V in class Lcom/facebook/imagepipeline/core/ImagePipelineFactory; or its super classes (declaration of 'com.facebook.imagepipeline.core.ImagePipelineFactory' appears in /data/app/<project>/base.apk!classes16.dex)
        at com.facebook.drawee.backends.pipeline.Fresco.initialize(Fresco.java:83)
        at com.facebook.drawee.backends.pipeline.Fresco.initialize(Fresco.java:45)
        at com.facebook.react.modules.fresco.FrescoModule.initialize(FrescoModule.java:114)
        at com.facebook.react.bridge.ModuleHolder.doInitialize(ModuleHolder.java:236)
        at com.facebook.react.bridge.ModuleHolder.markInitializable(ModuleHolder.java:100)
        at com.facebook.react.bridge.NativeModuleRegistry.notifyJSInstanceInitialized(NativeModuleRegistry.java:103)
        at com.facebook.react.bridge.CatalystInstanceImpl$2.run(CatalystInstanceImpl.java:438)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:223)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
        at java.lang.Thread.run(Thread.java:923)
I/Process: Sending signal. PID: 10813 SIG: 9

@JJMoonがローカル画像（必須）で

チームがこの問題を修正するのを待っている間、私はそのようにImageとFastImageの両方を使用しています
if(height < blurSize){ return <Image/> }else{ return <FastImage/> }