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 안녕하세요, 공개된 문제 게시물을 읽으면 이미지 크기를 정확하게 씁니다.

코드는 단순한 이미지일 뿐입니다 이미지 크기는 2111 x 4645픽셀입니다.

이것은 Fresco 1.9.0에서 1.10.0으로 변경된 RN >= 0.57에서 발생한 동작 변경에 관한 것입니다. 그와 같은 큰 이미지는 해당 버전 이전에 전체 품질로 작동하고 로드되었습니다. RN repo의 기고자들은 이것이 RN 문제가 아니라 Fresco lib 문제라고 말하면서 문제를 종료했습니다. 의도적으로 행동을 변경했다면 이 문제를 종료할 수 있습니다. 예, 해결 방법이 있지만 이것이 버전까지 작동하다가 갑자기 이유에 대한 정보 없이 작동이 중지되었다는 것입니다.

안녕하세요, 최근에 이 문제에 대한 활동이 없는 것 같습니다. 문제가 해결되었습니까? 아니면 여전히 커뮤니티의 관심이 필요한가요? 더 이상 활동이 발생하지 않으면 이 문제가 종료될 수 있습니다. 또한 이 문제에 "버그" 또는 "향상" 레이블을 붙일 수 있으며 저는 그대로 둡니다. 귀하의 기여에 감사드립니다.

장기간 사용하지 않으면 이 문제를 종료합니다. 이 문제가 최신 릴리스에 여전히 존재하는 경우 최신 정보로 언제든지 다시 여십시오.

이 문제를 일으킬 수 있는 잠재적인 변경 사항은 https://github.com/facebook/fresco/commit/fa71901055a38a810c190862c7fd582fd3dad2b3입니다.

문제가 되는 변경 사항인지 확인할 수 있습니까?

@oprisnik 다시 한 번 안녕하세요. 이 문제를 조사해 주셔서 감사합니다.

나는 Gradle과 라이브러리를 다운로드하는 대신 소스에서 직접 프레스코를 컴파일하도록 RN을 변경하는 방법에 익숙하지 않습니다. 내가 성공하지 못한 단계:

1. react-native-cli 사용하여 RN 0.57 프로젝트 생성
2. fresco lib를 프로젝트 루트 디렉토리에 복제
3. fresco lib 내부의 v1.10.0 분기로 체크아웃
4. 추가 android-ndk-r20 에 경로를 <Project>\android\local.properties ( ndk.dir=G:\\Dev\\Android\\android-ndk-r20 )

그런 다음 소스에서 프레스코로 RN을 컴파일하고 라이브러리를 재정의하는 SO https://stackoverflow.com/a/52861379/1889685 에서 이 답변을 찾았습니다.

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);
}

이것으로 나는 Fresco가 이미 초기화되었다는 메시지를 Logcat에서 받습니다.

MainReactPackage 로 MainPackageConfig MainReactPackage 를 초기화하여 사용한 두 번째 방법이지만 작동하지 않았습니다.

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 나는 모른다. 소스 코드에서 비활성화했습니다.

핑 @oprisnik

(가) 기본 기본 패키지의 구성 반응을 통해 다음과 같습니다가 설정됩니다 https://github.com/facebook/react-native/blob/6c0f73b3223968448bb186b82f06f6819068a21d/ReactAndroid/src/main/java/com/facebook/react/shell/MainPackageConfig.java

RN으로 설정하는 방법을 잘 모르겠고 시도한 적이 없습니다.

@oprisnik 이 문제를 해결할 계획이 있습니까?

나는 이 문제가 여전히 RN repo에 속한다고 생각합니다. 이미지 다운샘플링은 의심할 여지 없이 메모리 비용을 줄이고 효율성을 높이며 큰 이미지를 로드할 때 크래시를 줄이기 위한 것입니다. 이 문제는 최종 개발자가 옵션/속성 형태로 이미지 다운샘플링을 원하는지 여부를 선택할 수 있는 방식으로 RN에서 처리해야 한다고 생각합니다. 예를 들어 내 앱에서 일부 평면도를 표시하기 위해 큰 이미지를 사용하는 경우 사용자가 평면도를 확대할 때 고해상도가 필요합니다. 나는 항상 장치 기능을 확인하고 RAM이 적거나 저해상도가 있는 저가형 장치인 경우 더 작고 저해상도 이미지를 로드합니다.

scale 및 resize 있는 <Image/> 구성 요소에 대한 resizeMethod 속성이 있습니다. RN 현재는 해당 속성의 scale 값을 존중하지 않으므로 이미지 다운샘플링을 비활성화하고 resize 설정할 때만 활성화해야 한다고 생각합니다.

resizeMethod

이미지의 크기가 이미지 보기의 크기와 다를 때 이미지의 크기를 조정하는 데 사용해야 하는 메커니즘입니다. 기본값은 자동입니다.

resize : 디코딩되기 전에 메모리에서 인코딩된 이미지를 변경하는 소프트웨어 작업입니다. 이미지가 보기보다 훨씬 클 때 scale 대신 사용해야 합니다.

scale : 이미지가 축소 또는 확대되어 그려집니다. resize 비해 scale 는 더 빠르고(일반적으로 하드웨어 가속) 더 높은 품질의 이미지를 생성합니다. 이미지가 보기보다 작은 경우에 사용해야 합니다. 이미지가 보기보다 약간 큰 경우에도 사용해야 합니다.

@oprisnik @sunnylqm에 대한 귀하의 생각을 정말 보고 싶습니다.

@clytras 말씀하신 대로 프레스코에서 설명이 없는 동작 변경입니다. (제가 보여주는 데모는 fresco repo의 예제 앱입니다) 그래서 RN과 아무 관련이 없다고 생각합니다.

@sunnylqm 물론 설명 없이 프레스코의 동작 변경이지만 RN은 이 프레스코 기능을 활성화/비활성화하는 선택을 최종 개발자에게 맡겨야 합니다.

또한 이러한 동작 변경은 iOS에서는 발생하지 않으므로 이에 대해 조치를 취해야 하고 프레스코 구성은 반응 네이티브에서 발생하므로 이 구성을 최종 RN 개발자에게 공개해야 한다는 것을 잊지 마십시오.

BTW 최신 RN 0.61.2로 Fresco 2.0.0(마스터 브랜치)을 컴파일하고 DecodeProducer.java 에서 다운샘플링 조건 검사를 주석 처리하여 다운샘플링을 비활성화했습니다.

fresco repo 디렉토리 안에 local.properties 파일을 만들고 Windows 64비트용 Android NDK Revision 19c x86_64 를 사용했습니다.

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 프로젝트 내에서 프레스코를 초기화하는 더 좋고 깨끗하고 쉬운 방법이 필요하다고 생각합니다. 이는 제가 시도한 어떤 방법으로도 달성할 수 없었습니다. 일부 프로젝트에서 MainReactPackage 구성을 전달하여 getPackages 메서드 내에서 초기화하기 위해 com.facebook.imagepipeline.core.ImagePipelineConfig , com.facebook.react.shell.MainReactPackage 및 com.facebook.react.shell.MainPackageConfig 를 사용하는 것을 보았지만 그것은 내가 시도한 최신 RN 0.61이나 RN 0.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),
    ...
  ));
}

아마도 내가 거기에서 뭔가 잘못하고 있고 <project>/android/app/build/generated/rncli/src/main/java/com/facebook/react/ 디렉토리 안에 PackageList.java 파일을 생성하는 새로운 >= 0.60 연결 시스템에서 확실히 작동하지 않았을 것입니다. 왜냐하면 MainReactPackage 가 인수 없이 전달되었고 자동 연결 시스템을 사용하여 모든 종류의 인수를 전달할 수 있는 방법이 보이지 않지만 fresco 구성으로 MainReactPackage 를 수동으로 전달하여 시도했지만 작동하지 않았습니다.

React Native용으로 생성된 Android 프로젝트 내에서 사용자 지정 구성으로 fresco lib를 초기화하는 방법에 대한 명확하고 문서화된 방법이 필요합니다.

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 값을 전달함)
그러나 프레스코에서는 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) 의 두 번째 인수에서 config를 전달할 수 있습니다.
그리고 실제로 예상대로 작동해 보았습니다. 문제는 여기 로직이 https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 구성을 무시했다는 것입니다. -L169 false
이래야 하는거 맞죠?

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

@oprisnik

@sunnylqm 저는 사무실에 없어서 지금 확인할 수 없지만 새로운 _RN >= 60_ 자동 링크 시스템을 사용하여 구성을 전달하는 방법을 찾지 못했다는 것을 기억합니다. 확실하지 않습니다. 나를 위해 이전 _RN_ 버전에서도 작동하지 않았습니다. 며칠 후에 휴가에서 돌아올 때 확인하겠습니다.

나는 상태가 IS_RESIZING_DONE 플래그가 아니어서 mDownsampleEnabled 완전히 우회하는 경우 다운샘플링이 항상 적용된다는 것이 매우 분명하기 때문에 OR 에서 AND 변경으로 문제를 해결할 것이라고 믿습니다. 물론 다운샘플을 비활성화하는 사용자 지정 프레스코 구성이 적용되어 프레스코로 전달되는 경우입니다.

@clytras gradle 사용 중단 등으로 모든 종류의 오류가 발생합니다. 사전 빌드 바이너리를 올릴 수 있는 기회가 있습니까? (설치할 위치를 알려주세요)? 정말 감사하겠습니다.

아 잊어버려. 물어보는 것조차 실례입니다. 나는 그것을 알아낼 것이고, 아마도 PR을 할 것이다.

@CaptainN 무례하지 않습니다. 문제는 내가 그것을했고 모든 오류에 직면했기 때문에 Fresco를 설치하고 패치하는 방법에 대한 지침이 포함된 스타터 리포지토리를 만드는 데 훨씬 적은 시간이 소요된다는 것입니다.

여기 있습니다: https://github.com/clytras/RN061FrescoBuild

RN 0.61.5 있습니다. 리포지토리에는 자세한 지침이 있습니다. 이 체크 아웃을 프레스코을, 클론 v2.1.0 하고 패치를 적용 DecodeProducer.java 그래서 다운 샘플링 코드를 주석. Android NDK를 다운로드하고 libraries/fresco/local.properties 파일을 추가하기

지침과 yarn 스크립트를 따르면 기존 RN >= 0.60(_또는 이전 버전_) 프로젝트에 fresco lib를 추가할 수 있습니다.

@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;
}

한 번만 변경하면 위의 구성 코드가 작동하고 다운샘플링이 비활성화됩니다. 해당 구성 을 .setDownsampleEnabled(true) 를 설정하면 다운샘플링이 제대로 활성화됩니다. 그것은 나에게 버그처럼 보입니다. @oprisnik. 물론 나에게 이상적인 것은 RN이 resizeMethod 를 존중하고 동적으로 다운샘플링을 적용하는 것이지만 그것이 가능한지 확실하지 않습니다.

편집하다

사실 나는 부분적으로 틀렸다. 그 변경(_이것은 완전히 의미가 있음)으로 RN은 여기에서 볼 수 있는 것처럼 .setDownsampleEnabled(false) 를 설정합니다. ReactAndroid/src/main/java/com/facebook/react/modules/fresco/FrescoModule.java#L155 , 다운샘플링을 활성화하려면 위의 코드로 fresco를 구성하고 .setDownsampleEnabled(true) 합니다. RN은 기본적으로 다운샘플링을 비활성화합니다!

@clytras @CaptainN 이 문제에 대한 작업에 감사드립니다. 나는 Expo를 사용하여 그것을 경험하고 있으며 가능한 경우 내 앱을 꺼내지 않고 솔루션을 찾기를 정말로 고대하고 있습니다.

반응 네이티브 CLI: 2.0.1
반응 네이티브: 0.61.2

작은 업데이트. 나는 오랫동안 이 문제에 직면하지 않았습니다. 그러나 이것이 대부분의 이미지에 대해 동일한 이미지의 3가지 다른 축척( @1x , @2x , @3x)을 사용하도록 전환했기 때문인지 확실하지 않습니다.

@enguerranws Expo를 사용한 경험이 전혀 없습니다. @gorvinsky 방금 RN 0.61.5를 사용하여 테스트했는데 작동하지 않습니다. 불행히도 번들 이미지 크기는 작동하지 않았습니다. 처음 이 문제에 직면했을 때 테스트한 것입니다.

RN 0.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

@enguerranws Expo를 사용한 경험이 전혀 없습니다. @gorvinsky 방금 RN 0.61.5를 사용하여 테스트했는데 작동하지 않습니다. 불행히도 번들 이미지 크기는 작동하지 않았습니다. 처음 이 문제에 직면했을 때 테스트한 것입니다.

RN 0.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. 안드로이드/빌드.gradle

Gradle 종속성 사용은 3.4.1입니다.

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

1. 스크립트 실행

yarn fresco-setup

1. 안드로이드 ndk 다운로드

나는 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 하나 ? 고마워)

@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. 안드로이드/빌드.gradle

Gradle 종속성 사용은 3.4.1입니다.

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

1. 스크립트 실행

yarn fresco-setup

1. 안드로이드 ndk 다운로드

나는 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) 프로젝트로 컴파일 중입니다.

또한 MainApplication.java에 Fresco Config를 추가하려고 시도했지만 운이 없었습니다.

@ravali121 이 단계는 RN 0.59 또는 이전 버전이 아닌 RN >= 0.60.x용입니다. 이전 RN 버전에 대해 패치할 수 있지만 단계 및 Fresco 체크아웃은 특정 RN 버전과 함께 제공되는 버전을 따라야 합니다. RN 0.61용 Fresco 2.1.0과 RN 0.59는 다른 버전을 가지고 있으며 물론 패치가 필요하지는 않지만 코드 변경 사항은 DecodeProducer.java 를 편집하여 수동으로 적용할 수 있습니다. 또한 종속성을 처리하기 위한 추가 gradle 구성이 있습니다.

0.59에서 작동하도록 만들 수 있지만 프로젝트를 최소 0.61(또는 더 나은 0.62)로 업그레이드하는 것이 좋습니다.

안녕하십니까! 패치가 병합될 ETA에 대한 업데이트가 있습니까? (멋진 작업에 대해 @clytras 에게 감사드립니다. 최대한 빨리 패치를 시도해야 하지만 이 문제가 해결될지 알고 싶습니다.)

@FRizzonelli 패치는 해결 방법이며 실제로 문제에 대한 수정 사항이 아니므로 이 문제가 오랫동안 열려 있습니다.
패치와 @react-native-community/cli 템플릿을 확인하고 최신 RN 버전으로 업그레이드해야 합니다.

@clytras 이해합니다:( 문제는 지금 Expo에서 react-native-web을 사용하여 작은 POC를 설정하려고 하는데 Android에 이 문제가 있습니다. 그리고 작은 데모에서는 꺼내지 않고 싶습니다. 하지만 나는 내가해야한다고 생각합니다 :(

@clytras 이해합니다:( 문제는 지금 Expo에서 react-native-web을 사용하여 작은 POC를 설정하려고 하는데 Android에 이 문제가 있습니다. 그리고 작은 데모에서는 꺼내지 않고 싶습니다. 하지만 나는 내가해야한다고 생각합니다 :(

png 대신 jpg 형식을 사용하는 것은 어떻습니까? 나는 그것이 문제를 해결할 수 있는지 확신하지 못한다.

@clytras 이해합니다:( 문제는 지금 Expo에서 react-native-web을 사용하여 작은 POC를 설정하려고 하는데 Android에 이 문제가 있습니다. 그리고 작은 데모에서는 꺼내지 않고 싶습니다. 하지만 나는 내가해야한다고 생각합니다 :(

png 대신 jpg 형식을 사용하는 것은 어떻습니까? 나는 그것이 문제를 해결할 수 있는지 확신하지 못한다.

불행히도 작동하지 않으며 알파 레이어에 png가 필요합니다 :(

RN 0.63.4와 동일한 문제가 있습니다.
960 x 13983의 이미지 사이즈는 다운샘플링을 많이 해서 이미지의 글자가 잘 읽히지 않습니다.
680 X 2538의 이미지 크기도 다운 샘플링되었지만 꽤 괜찮습니다.
Image.getSize를 사용하여 이미지의 크기를 찾고 높이를 계산합니다(너비 100%).
이미지는 모두 jpg입니다.
나는 Gradle을 3.5.4, NDK 21.4.7075529와 @clytras의 방법을했다. 하지만, 같은 문제.

        <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는 그렇지 않습니다.

함께 안녕,

이 스레드에서 가능한 모든 솔루션을 시도했지만 RN 0.64.2 및 Fresco 2.5.0을 사용했습니다.
NDK v22.1.7171670 및 gradle 4.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/> }