Fresco: جودة صورة منخفضة باستخدام<image/> المكون على RN&gt; = 0.57 (فريسكو&gt; = 1.10.0)

مرحبًا ، يبدو أنه لم يكن هناك أي نشاط بشأن هذه المشكلة مؤخرًا. هل تم إصلاح المشكلة أم أنها لا تزال تتطلب اهتمام المجتمع؟ قد يتم إغلاق هذه المشكلة في حالة عدم حدوث أي نشاط آخر. يمكنك أيضًا تصنيف هذه المشكلة على أنها "خطأ" أو "تحسين" وسأتركها مفتوحة. شكرا لمساهماتكم.

ما هي إصدارات Fresco التي تستخدم RN 0.56.0 و 0.57.1؟ هذا يضيق عدد الالتزامات التي يمكن أن تسببت في ذلك.

مرحبا oprisnik ،

سأتحقق وأرى بالضبط في أي إصدار حصل على الترقية عندما أعود إلى مكتبي ، على الرغم من أنني أعتقد أن https://github.com/facebook/react-native/issues/21301#issuecomment -520155609 تقارير بالضبط من أي إصدار حصل هذا التغيير في السلوك.

مرحبًا clytras ، لقد وجدت الصورة على الشاشة في هذا المستودع .
قمت بتحميل الصورة ووجدت الصورة 2111 (عرض) * 4645 (ارتفاع).

ستختزل Fresco صورة لتلائم حد OpenGL ، الحد الأقصى للعرض / الارتفاع الافتراضي للصورة هو الكود الثابت في هذا السطر .

فى رايى،
الطريقة السهلة هي تغيير حقل maxBitmapSize الخاص بـ ResizeOption.
الطريقة الصحيحة هي عدم استخدام Fresco لعرض صورة كبيرة جدًا.

قم بإنشاء عنصر واجهة مستخدم آخر ، واستخدم هذه المكتبة لعرض صورة كبيرة جدًا هو اختيار العديد من فريق android.

مرحبًا @ s1rius ، أكتب حجم الصورة بدقة إذا قرأت

الكود مجرد صورة بسيطة وحجم الصورة 2111 × 4645 بكسل

يتعلق الأمر بتغيير السلوك الذي حدث من RN> = 0.57 والذي تغير من Fresco 1.9.0 إلى 1.10.0. كانت الصور الكبيرة مثل تلك تعمل ويتم تحميلها بجودة كاملة قبل هذا الإصدار. أغلق المساهمون من RN repo المشكلة لأنهم صرحوا أن هذه ليست مشكلة RN ولكنها مشكلة Fresco lib. إذا تم إجراء هذا التغيير السلوكي عن قصد ، فيمكننا إغلاق هذه المشكلة. نعم ، هناك حلول بديلة ولكن هذا كان يعمل حتى إصدار وفجأة ، وبدون معلومات عن السبب ، توقف عن العمل.

مرحبًا ، يبدو أنه لم يكن هناك أي نشاط بشأن هذه المشكلة مؤخرًا. هل تم إصلاح المشكلة أم أنها لا تزال تتطلب اهتمام المجتمع؟ قد يتم إغلاق هذه المشكلة في حالة عدم حدوث أي نشاط آخر. يمكنك أيضًا تصنيف هذه المشكلة على أنها "خطأ" أو "تحسين" وسأتركها مفتوحة. شكرا لمساهماتكم.

إغلاق هذه القضية بعد فترة طويلة من الخمول. إذا كانت هذه المشكلة لا تزال موجودة في الإصدار الأخير ، فلا تتردد في إعادة الفتح بمعلومات محدثة.

التغيير المحتمل الذي قد يكون سبب ذلك هو https://github.com/facebook/fresco/commit/fa71901055a38a810c190862c7fd582fd3dad2b3

هل يمكنك التحقق مما إذا كان هذا هو التغيير المسيء؟

مرحبًا مرة أخرى oprisnik وشكرًا على التحقيق في هذا الأمر.

لست معتادًا على gradle وكيف يمكنني تغيير RN لتجميع اللوحات الجدارية مباشرةً من المصدر بدلاً من تنزيل المكتبة. الخطوات التي اتخذتها ولكن دون جدوى:

1. أنشئ مشروع RN 0.57 باستخدام react-native-cli
2. استنساخ lib fresco إلى الدليل الجذر للمشروع
3. تسجيل الخروج إلى فرع v1.10.0 داخل lib في الهواء الطلق
4. أضف android-ndk-r20 path إلى <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. هل لديكم بنى ليلية يمكننا اختبارها؟

نظرًا لأنني أستطيع تجميع الإصدار 2.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"
      />

عرض الإصدار 2.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 لكنها لم تنجح أيضًا:

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

تضمين التغريدة لقد قمت بتعطيله في التعليمات البرمجية المصدر.

pingoprisnik

يبدو أنه تم تعيين هذا عبر تهيئة الحزمة الرئيسية لـ React Native: https://github.com/facebook/react-native/blob/6c0f73b3223968448bb186b82f06f6819068a21d/ReactAndroid/src/main/java.com/facebook/react/shageCon/MainPack.

لست متأكدًا من كيفية إعداد ذلك باستخدام RN ، لم تجرب ذلك مطلقًا.

oprisnik هل هناك أي خطة لإصلاح هذه المشكلة؟

أعتقد أن هذه المشكلة لا تزال تنتمي إلى RN repo. يعد تصغير حجم الصورة أمرًا بلا شك لتقليل تكلفة الذاكرة واكتساب الكفاءة وتقليل المشكلات عند تحميل الصور الكبيرة. أعتقد أن RN يجب أن تتعامل مع هذه المشكلات بطريقة تسمح للمطورين النهائيين باختيار ما إذا كانوا يريدون تصغير حجم الصورة أم لا في شكل خيار / خاصية. على سبيل المثال في تطبيقي ، حيث أستخدم صورًا كبيرة لتقديم بعض مخططات الطوابق ، أحتاج إلى دقة عالية عندما يقوم المستخدم بتكبير مخطط المبنى. أتحقق دائمًا من إمكانيات الجهاز وإذا كان جهازًا منخفض التكلفة به ذاكرة وصول عشوائي أقل أو دقة منخفضة ، فأنا أحمل صورًا بدقة أصغر وأقل.

هناك resizeMethod ممتلكات لل <Image/> العنصر الذي لديه scale و resize . لا تحترم RN currenlty القيمة scale لتلك الخاصية ، والتي أعتقد أنها يجب أن تعطل اختزال الصورة وتمكينها فقط عند تعيينها على resize .

resizeMethod

الآلية التي يجب استخدامها لتغيير حجم الصورة عندما تختلف أبعاد الصورة عن أبعاد عرض الصورة. افتراضيات إلى تلقائي.

resize : عملية برمجية تقوم بتغيير الصورة المشفرة في الذاكرة قبل فك تشفيرها. يجب استخدام هذا بدلاً من scale عندما تكون الصورة أكبر بكثير من العرض.

scale : يتم تصغير الصورة أو تكبيرها. بالمقارنة مع resize ، فإن scale أسرع (عادةً ما يتم تسريع الأجهزة) وينتج صورًا عالية الجودة. يجب استخدام هذا إذا كانت الصورة أصغر من العرض. يجب استخدامه أيضًا إذا كانت الصورة أكبر قليلاً من العرض.

أود حقا أن نرى أفكارك حول هذاoprisniksunnylqm.

clytras كما قلت ، إنه تغيير سلوك في الجص بدون تفسير. (العرض التوضيحي الذي أعرضه هو مثال التطبيق في الريبو الجداري) لذلك لا أعتقد أن له أي علاقة بـ RN.

sunnylqm بالطبع هو تغيير سلوك في اللوحة الجدارية دون تفسير ولكن يجب أن تترك RN خيار تمكين / تعطيل هذه الميزة الجدارية حتى نهاية المطورين.

لا تنس أيضًا أن هذا التغيير في السلوك لا يحدث بالطبع في نظام التشغيل iOS ، لذلك يتعين علينا القيام بشيء حيال ذلك ، وبما أن تكوين اللوحات الجدارية يحدث في رد فعل أصلي ، فأعتقد أن هذا التكوين يجب أن يتعرض لمطوري RN النهائيين.

راجع للشغل تمكنت من تجميع Fresco 2.0.0 (الفرع الرئيسي) بأحدث RN 0.61.2 وتعطيل الاختزال من خلال التعليق على فحص حالة الاختزال في DecodeProducer.java كما فعلت.

لقد قمت بإنشاء ملف local.properties داخل دليل repo fresco واستخدمت Android NDK Revision 19c x86_64 لنظام التشغيل windows 64 بت.

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

تم تجميع ثنائيات فريسكو بنجاح وتم تعطيل اختزال الصورة لتطبيق 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 لتهيئتها داخل طريقة getPackages بتمرير التكوين إلى MainReactPackage ، لكن التي لم تنجح بالنسبة لي لا في أحدث 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),
    ...
  ));
}

ربما أفعل شيئًا خاطئًا هناك ، وهذا بالتأكيد لا يعمل مع نظام الربط الجديد> = 0.60 الذي ينشئ ملف PackageList.java داخل دليل <project>/android/app/build/generated/rncli/src/main/java/com/facebook/react/ لأن MainReactPackage هو مرت بدون أي وسيطات ولا يمكنني رؤية طريقة لتمرير أي نوع من الوسائط باستخدام نظام الربط التلقائي ، لكنني حاولت يدويًا تمرير MainReactPackage باستخدام تكوين فريسكو ولم ينجح ذلك أيضًا.

نحتاج إلى طريقة نظيفة وموثقة حول كيفية تهيئة lib في الهواء الطلق بتكوين مخصص داخل مشروع android الذي تم إنشاؤه لـ React Native.

بعد قراءة https://frescolib.org/docs/resizing.html وإذا فهمت بشكل صحيح ، فإن downsampling هو بديل لـ resizing . حتىclytras أعتقد أنك على حق، إذا وضع resizeMethod لتوسيع نطاق لا ينبغي تمكين الاختزال.

يبدو الرمز في RN صحيحًا بالنسبة لي https://github.com/facebook/react-native/blob/aee88b6843cea63d6aa0b5879ad6ef9da4701846/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java# ( سيمرر قيمة فارغة إلى خط الصورة ، مما يشير إلى عدم وجود تغيير في الحجم / الاختزال)
ولكن في الجص لا يحترم خيار resizeOptions الفارغ https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 - L169
إذا كان كل من downsampleEnabled و downsampleEnabledForNetwork صحيحًا ، فسيتم تصغير حجمه ، بغض النظر عن تغيير الحجم
https://github.com/facebook/fresco/blob/master/imagepipeline-base/src/main/java/com/facebook/imagepipeline/transcoder/DownsampleUtil.java#L56
لذلك يبدو لي أن هناك عدم تطابق بين المستند والكود. ونحتاج إلى طريقة أكثر مرونة للتحكم في ما إذا كنا نريد اختزال حجم صورة معينة. (الآن يتم التحكم فيه بواسطة تكوينات عالمية) clytrasoprisnik

عمل جيد هناكsunnylqm. بدأت في البحث عن تكوين RN واتباعه لمكون <Image/> للتحقق من هذه الأشياء ، لكنك تجاوزتني!

نظرًا لوجود مثل هذا التغيير في السلوك ، أعتقد أنه يجب على أي من اللوحات الجدارية التحقق من الاختزال وتطبيقه فقط إذا لم يكن resizeOptions فارغًا ؛ والتي يتم تعيينها فقط إذا تم تعيين resizeMethod على resize (أو auto وللصور المحلية) ، والتي يتم تحديدها في https://github.com/facebook/react- original / blob / aee88b6843cea63d6aa0b5879ad6ef9da4701846 / ReactAndroid / src / main / java / com / facebook / رد / views / image / ReactImageView.java # L606 shouldResize أو يجب أن يكون هناك resizeMethod enum خيار الاختزال على وجه التحديد.

مرحبًا ، يبدو أنه لم يكن هناك أي نشاط بشأن هذه المشكلة مؤخرًا. هل تم إصلاح المشكلة أم أنها لا تزال تتطلب اهتمام المجتمع؟ قد يتم إغلاق هذه المشكلة في حالة عدم حدوث أي نشاط آخر. يمكنك أيضًا تصنيف هذه المشكلة على أنها "خطأ" أو "تحسين" وسأتركها مفتوحة. شكرا لمساهماتكم.

clytras هل يمكنك إخبار الحل الخاص بك؟

@ club9822 الحل في الوقت الحالي هو تجميع ثنائيات جدارية من المصدر بعد تعطيل اختزال الصورة أولاً كما أصفه هنا https://github.com/facebook/fresco/issues/2397#issuecomment -541802753

هل هناك حل بديل لهذا دون إعادة تجميع المكتبات الأساسية؟

CaptainN لا يوجد حل سهل لهذه المشكلة. قد تبدو عملية تجميع المصادر صعبة ومملة ، لكنها في الواقع تتعلق بإجراء بعض التغييرات الطفيفة وتنفيذ الأوامر. اتبع منشوراتي في هذا العدد لمعرفة كيفية القيام بذلك.

clytras يمكنك تمرير config في الوسيطة الثانية في new PackageList(this, 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))

تضمين التغريدة

sunnylqm أنا بعيد عن المكتب ولا يمكنني التحقق الآن ، لكني أتذكر أنني لم أجد طريقة لتمرير التكوين باستخدام _RN الجديد> = 60_ نظام الارتباط التلقائي. لست متأكدا بالرغم من ذلك. لم تنجح حتى مع إصدارات _RN_ الأقدم بالنسبة لي. سوف أتحقق من ذلك في غضون يومين عندما أعود من الإجازات.

أعتقد أن التغيير "أو" إلى و "و" سيحل المشكلة لأنه من الواضح تمامًا أن الاختزال ينطبق الآن دائمًا إذا لم تكن الحالة تحتوي على علامة IS_RESIZING_DONE لذا فهي تتجاوز mDownsampleEnabled . بالطبع سيكون هذا هو الحال إذا تم تطبيق التكوين الجصي المخصص الذي يعطل عينة الاختزال وتمريره إلى اللوحة الجدارية.

clytras أواجه كل أنواع الأخطاء مع إهمال gradle وكل ذلك. هل توجد أي فرصة يمكنك من خلالها طرح برنامج ثنائي مسبق الإنشاء (وإخباري بمكان تثبيته)؟ أنا حقا أقدر ذلك.

آه انسى ذلك. من الوقاحة أن تسأل. سأكتشف ذلك ، وربما أضع العلاقات العامة.

تضمين التغريدة الشيء هو أنني قمت بذلك وواجهت جميع الأخطاء ، لذلك سوف يستغرق الأمر وقتًا أقل بكثير بالنسبة لي لعمل ريبو مبدئي مع إرشادات حول كيفية تثبيت Fresco وتصحيحه.

إذن ها هو: https://github.com/clytras/RN061FrescoBuild

لديها RN 0.61.5 . يحتوي الريبو على تعليمات مفصلة. إنه يستنسخ Fresco ، ويخرج v2.1.0 ويطبق التصحيح على DecodeProducer.java حتى يعلق على كود الاختزال. ما عليك سوى تنزيل Android NDK وإضافة ملف libraries/fresco/local.properties . كل شيء مفصل في الملف التمهيدي.

يمكنك إضافة fresco lib إلى مشروع RN> = 0.60 (_ أو الإصدارات الأقدم_) إذا اتبعت الإرشادات ونصوص الغزل.

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 / رد فعل / modules / fresco / FrescoModule.java # L155 ، لذا ، في لتمكين الاختزال ، يتعين علينا تكوين لوحة جدارية باستخدام الكود أعلاه وتعيين .setDownsampleEnabled(true) . تم تعطيل الاختزال افتراضيًا لـ RN!

clytrasCaptainN شكرا جزيلا لعملكم في هذه المسألة. أنا أختبره باستخدام Expo وأتطلع حقًا إلى إيجاد حل ، دون إخراج تطبيقي ، إن أمكن.

رد فعل أصلي CLI: 2.0.1
رد فعل أصلي: 0.61.2

تحديث صغير. لم أواجه هذه المشكلة منذ وقت طويل الآن. لكنني غير متأكد مما إذا كان هذا بسبب أنني قمت بالتبديل لاستخدام 3 مقاييس مختلفة لنفس الصورة ( @ 1x ، @ 2x ، @ 3x) لمعظم الصور.

enguerranws ليس لدي أي خبرة في استخدام إكسبو على الإطلاق. gorvinsky لقد اختبرت ذلك للتو باستخدام RN 0.61.5 وهو لا يعمل. أحجام الصور المجمعة المؤسفة لم تنجح أبدًا. كان أول شيء اختبرته عندما واجهت هذه المشكلة لأول مرة.

لقد أنشأت نموذج مجتمع / مجتمع أصلي / رد فعل يحتوي على مشروع RN 0.61.5 والتعديلات المطلوبة لإنشاء Fresco من المصدر. هذه طريقة سهلة وسريعة للحصول على مشروع RN جديد تم تصميمه باستخدام اسم مشروع مخصص ومع التغييرات اللازمة لتجميع Fresco من المصدر. كما أنه يستخدم Android NDK Revision 21 وقد اختبرته على macOS و Windows باستخدام yarn 1.21 .

مستودع جيثب: clytras / رد فعل أصلي-فريسكو
نموذج NPM: @ lytrax / رد فعل أصلي فريسكو

يمكن تثبيته على النحو التالي:

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

توجد تعليمات التثبيت التفصيلية في README . تحتاج إلى استنساخ / تصحيح Fresco باستخدام yarn fresco-setup ثم تثبيت Android NDK وإنشاء android/libraries/fresco/local.properties باستخدام مسار Android NDK.

هل هذا الالتزام في رد الفعل الأصلي إصلاح هذا؟ (لم يتم إصداره الآن)

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

في الوصف ، يقول أنه يمكننا تمرير PipelineConfig الذي يحتوي على سمة "setDownsampleEnabled".

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

enguerranws ليس لدي أي خبرة في استخدام إكسبو على الإطلاق. gorvinsky لقد اختبرت ذلك للتو باستخدام RN 0.61.5 وهو لا يعمل. أحجام الصور المجمعة المؤسفة لم تنجح أبدًا. كان أول شيء اختبرته عندما واجهت هذه المشكلة لأول مرة.

لقد أنشأت نموذج مجتمع / مجتمع أصلي / رد فعل يحتوي على مشروع RN 0.61.5 والتعديلات المطلوبة لإنشاء Fresco من المصدر. هذه طريقة سهلة وسريعة للحصول على مشروع RN جديد تم تصميمه باستخدام اسم مشروع مخصص ومع التغييرات اللازمة لتجميع Fresco من المصدر. كما أنه يستخدم Android NDK Revision 21 وقد اختبرته على macOS و Windows باستخدام yarn 1.21 .

مستودع جيثب: clytras / رد فعل أصلي-فريسكو
نموذج NPM: @ lytrax / رد فعل أصلي فريسكو

يمكن تثبيته على النحو التالي:

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

توجد تعليمات التثبيت التفصيلية في README . تحتاج إلى استنساخ / تصحيح Fresco باستخدام yarn fresco-setup ثم تثبيت Android NDK وإنشاء android/libraries/fresco/local.properties باستخدام مسار Android NDK.

هل هناك طريقة لتنفيذه على مشروع قائم؟

تضمين التغريدة
جرب بهذه الطريقة. (بلدي RN هو v0.61.4)
إنها طريقة تطبيق رقعة clytras على مشروع قائم.
ولا يمكن تشغيل محاكي android بعد الآن. أنا دائما أختبر على أجهزة حقيقية. 😢

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

استخدام تبعية التدرج هي 3.4.1

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

1. النصي تشغيل

yarn fresco-setup

1. تنزيل android 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. قم بتشغيل android

هذا كل شئ.

yarn android وتحقق من جودة الصورة الكبيرة.

بفضلclytras

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

تضمين التغريدة
ما هو الأمر file-patch ؟

ما الذي يمنع هذا من الاندماج؟ لماذا نطلب هذه التصحيحات بدلاً من مجرد إصلاحها (بافتراض أنها ليست مجرد قيود زمنية - أفهم ذلك تمامًا ، ولا أحاول أن أكون انتهازيًا)؟

kalmahik file-patch هي أداة تصحيح CLI لحزمة NPM.

JeffGuKang ، يجب تضمين التغييرات في package.json المطلوبة حتى تعمل البرامج النصية لإعداد القالب.

CaptainN لا أعتقد أن الأمر بهذه البساطة ، على الرغم من أنني لم

clytras أوه هذا واحد ؟ شكرا)

تضمين التغريدة
جرب بهذه الطريقة. (بلدي RN هو v0.61.4)
إنها طريقة تطبيق رقعة clytras على مشروع قائم.
ولا يمكن تشغيل محاكي android بعد الآن. أنا دائما أختبر على أجهزة حقيقية. 😢

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

استخدام تبعية التدرج هي 3.4.1

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

1. النصي تشغيل

yarn fresco-setup

1. تنزيل android 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. قم بتشغيل android

هذا كل شئ.

yarn android وتحقق من جودة الصورة الكبيرة.

بفضلclytras

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

أواجه هذه المشكلة عند محاولة تجميع Fresco من المصدر باتباع البرنامج النصي clytras . أقوم بتجميعها في مشروع RN (v0.59.9) موجود

أيضًا ، حاول إضافة Fresco Config إلى MainApplication.java ولكن لم يحالفك الحظ هناك

@ ravali121 هذه الخطوات لـ RN> = 0.60.x ، وليست لـ RN 0.59 أو الإصدارات الأقدم. يمكن تصحيحه لإصدارات RN الأقدم ، لكن الخطوات و Fresco checkout يجب أن تتبع الإصدار الذي يأتي مع إصدار RN المحدد. أنا أتحقق من Fresco 2.1.0 لـ RN 0.61 و RN 0.59 له إصدار مختلف وبالطبع تصحيح مختلف على الرغم من أن التصحيح ليس ضروريًا ، يمكن تطبيق تغييرات الكود يدويًا عن طريق تحرير DecodeProducer.java . أيضًا ، هناك تكوين تدرج إضافي للتعامل مع التبعيات.

على الرغم من أنه يمكنك جعله يعمل مع 0.59 ، أقترح عليك ترقية مشروعك / مشاريعك إلى 0.61 على الأقل (أو 0.62 أفضل).

أهلا بك! أي تحديث على ETA ليتم دمج التصحيح؟ (شكرًا clytras على العمل الرائع ، أحتاج إلى تجربة التصحيح الخاص بك في أسرع وقت ممكن ولكن أود معرفة ما إذا كان سيتم إصلاح هذا)

FRizzonelli ، التصحيح هو حل بديل ، إنه ليس حلاً للمشكلة حقًا ولهذا السبب تظل هذه المشكلة مفتوحة لفترة طويلة.
يجب أن أتحقق من التصحيح ونموذج @react-native-community/cli وترقيته إلى أحدث إصدار من RN.

أتفهمclytras : (المشكلة هي الآن أنني أحاول إعداد نقطة وصول صغيرة مع تفاعل أصلي على شبكة الإنترنت على Expo ، والتي بها هذه المشكلة لنظام Android.

أتفهمclytras : (المشكلة هي الآن أنني أحاول إعداد نقطة وصول صغيرة مع تفاعل أصلي على شبكة الإنترنت على Expo ، والتي بها هذه المشكلة لنظام Android.

ما رأيك في استخدام تنسيق jpg بدلاً من png ؟ لست متأكدًا من أنه يمكن حل المشكلة.

أتفهمclytras : (المشكلة هي الآن أنني أحاول إعداد نقطة وصول صغيرة مع تفاعل أصلي على شبكة الإنترنت على Expo ، والتي بها هذه المشكلة لنظام Android.

ما رأيك في استخدام تنسيق jpg بدلاً من png ؟ لست متأكدًا من أنه يمكن حل المشكلة.

للأسف لا يعمل أيضًا ، وأحتاج إلى png لطبقة ألفا :(

لدي نفس المشكلة مع RN 0.63.4.
حجم الصورة 960 × 13983 أصغر بكثير ، والنصوص في الصورة بالكاد يمكن قراءتها.
حجم الصورة 680 × 2538 منخفض أيضًا ولكنه لائق تمامًا.
لقد استخدمت Image.getSize لمعرفة حجم الصورة وحساب الارتفاع منها (العرض 100٪)
الصور كلها jpg.
فعلت طريقةclytras الصورة مع gradle 3.5.4، NDK 21.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 لا يفعل ذلك.

مرحبا سويا،

لقد جربت جميع الحلول الممكنة من هذا الموضوع ، ولكن مع RN 0.64.2 و Fresco 2.5.0.
أنا أستخدم NDK v22.1.7171670 و gradle 4.2.1.

أنا عالق حاليًا عند الخطأ التالي (هل المشكلة متعلقة بمحاكي android؟):

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 FastImage مع الصور المحلية (تتطلب) تجربة وميض سيئة.

أثناء انتظار قيام الفريق بإصلاح هذه المشكلة ، أستخدم كل من Image و FastImage من هذا القبيل
if(height < blurSize){ return <Image/> }else{ return <FastImage/> }