Fresco: निम्न छवि गुणवत्ता का उपयोग<image/> आरएन पर घटक&gt; = 0.57 (फ्रेस्को&gt; = 1.10.0)

अरे, ऐसा लगता है कि हाल ही में इस मुद्दे पर कोई गतिविधि नहीं हुई है। क्या समस्या का समाधान कर दिया गया है, या क्या इस पर अभी भी समुदाय के ध्यान की आवश्यकता है? यदि आगे कोई गतिविधि नहीं होती है, तो यह समस्या बंद हो सकती है। आप इस मुद्दे को "बग" या "एन्हांसमेंट" के रूप में भी लेबल कर सकते हैं और मैं इसे खुला छोड़ दूंगा। आपके योगदानों के लिए धन्यवाद।

RN 0.56.0 और 0.57.1 ​​कौन से फ्रेस्को संस्करण उपयोग कर रहे हैं? यह उन कमिट्स की संख्या को कम करता है जो इसके कारण हो सकते थे।

हैलो @oprisnik ,

जब मैं अपने कार्यालय में वापस आऊंगा तो मैं जांच करूंगा और देखूंगा कि किस संस्करण पैच को अपग्रेड मिला है, हालांकि मुझे लगता है कि https://github.com/facebook/react-native/issues/21301#issuecomment -520155609 बिल्कुल रिपोर्ट करता है किस संस्करण से यह व्यवहार परिवर्तन प्राप्त हुआ।

हाय @clytras , मुझे इस रिपॉजिटरी में स्क्रीन पर छवि मिली।
मैं चित्र डाउनलोड करता हूं, और पाता हूं कि चित्र 2111 (चौड़ाई) * 4645 (ऊंचाई) है।

ओपनजीएल सीमा में फिट होने के लिए फ्रेस्को एक छवि को डाउनसैम्पल करेगा, इस पंक्ति में डिफ़ॉल्ट छवि की अधिकतम चौड़ाई/ऊंचाई हार्डकोड है।

मेरी राय में,
आसान तरीका एक ResizeOption के maxBitmapSize फ़ील्ड को बदलना है।
बहुत बड़ी छवि प्रदर्शित करने के लिए फ़्रेस्को का उपयोग न करने का सही तरीका है।

एक अन्य विजेट बनाएं, और एक बहुत बड़ी छवि प्रदर्शित करने के लिए इस लाइब्रेरी का उपयोग करें, कई एंड्रॉइड टीम की पसंद है।

हाय @ s1rius , यदि आप ओपन इश्यू पोस्ट पढ़ते हैं तो मैं छवि का आकार ठीक लिखता हूं:

कोड सिर्फ एक साधारण छवि है और छवि का आकार 2111 x 4645 पिक्सेल है

यह एक व्यवहार परिवर्तन के बारे में है जो RN>= 0.57 से हुआ जो फ्रेस्को 1.9.0 से 1.10.0 में बदल गया। उस जैसी बड़ी छवियां उस संस्करण से पहले पूर्ण गुणवत्ता में काम कर रही थीं और लोड हो रही थीं। आरएन रेपो के योगदानकर्ताओं ने इस मुद्दे को बंद कर दिया क्योंकि वे कहते हैं कि यह एक आरएन मुद्दा नहीं है बल्कि एक फ्रेस्को लिब मुद्दा है। यदि वह व्यवहारिक परिवर्तन जानबूझकर किया जाता है, तो हम इस मुद्दे को बंद कर सकते हैं। हां वर्कअराउंड हैं लेकिन यह है कि यह एक संस्करण तक और अचानक काम कर रहा था, और बिना किसी जानकारी के क्यों, काम करना बंद कर दिया।

अरे, ऐसा लगता है कि हाल ही में इस मुद्दे पर कोई गतिविधि नहीं हुई है। क्या समस्या का समाधान कर दिया गया है, या क्या इस पर अभी भी समुदाय के ध्यान की आवश्यकता है? यदि आगे कोई गतिविधि नहीं होती है, तो यह समस्या बंद हो सकती है। आप इस मुद्दे को "बग" या "एन्हांसमेंट" के रूप में भी लेबल कर सकते हैं और मैं इसे खुला छोड़ दूंगा। आपके योगदानों के लिए धन्यवाद।

लंबे समय तक निष्क्रियता के बाद इस मुद्दे को बंद करना। यदि यह समस्या अभी भी नवीनतम रिलीज़ में मौजूद है, तो कृपया अप-टू-डेट जानकारी के साथ फिर से खोलने के लिए स्वतंत्र महसूस करें।

एक संभावित परिवर्तन जो इसका कारण हो सकता है वह है https://github.com/facebook/fresco/commit/fa71901055a38a810c190862c7fd582fd3dad2b3

क्या आप सत्यापित कर सकते हैं कि क्या यह आपत्तिजनक परिवर्तन है?

हैलो फिर से @oprisnik और इसकी जांच के लिए धन्यवाद।

मैं ग्रेडल से इतना परिचित नहीं हूं और मैं पुस्तकालय को डाउनलोड करने के बजाय सीधे स्रोत से फ्रेस्को को संकलित करने के लिए आरएन को कैसे बदल सकता हूं। बिना किसी सफलता के मैंने जो कदम उठाए हैं:

1. react-native-cli का उपयोग करके RN 0.57 प्रोजेक्ट बनाएं
2. प्रोजेक्ट रूट डायरेक्टरी में फ्रेस्को लिब क्लोन करें
3. फ्रेस्को लिब के अंदर 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 अगर उसके पास कुछ समय हो तो वह इसका परीक्षण कर सकता है, क्योंकि वह इस प्रक्रिया से अधिक परिचित है।

अगर यह मदद करता है, तो मेरे पास अब तक जो कुछ भी है उसके साथ मैं एक रेपो बना सकता हूं।

अरे, ऐसा लगता है कि हाल ही में इस मुद्दे पर कोई गतिविधि नहीं हुई है। क्या समस्या का समाधान कर दिया गया है, या क्या इस पर अभी भी समुदाय के ध्यान की आवश्यकता है? यदि आगे कोई गतिविधि नहीं होती है, तो यह समस्या बंद हो सकती है। आप इस मुद्दे को "बग" या "एन्हांसमेंट" के रूप में भी लेबल कर सकते हैं और मैं इसे खुला छोड़ दूंगा। आपके योगदानों के लिए धन्यवाद।

मैंने निर्माण करने की कोशिश की लेकिन एनडीके त्रुटि भी मिली। क्या आप लोगों के पास रात्रिकालीन निर्माण हैं जिन पर हम परीक्षण कर सकते हैं?

चूंकि मैं बिना किसी संशोधन के v2.0.0 संकलित कर सकता हूं, इसलिए मैंने सत्यापित करने का एक और तरीका आजमाया। मैंने डाउनसैंपलिंग को अक्षम कर दिया है जो उपरोक्त प्रतिबद्धता द्वारा सक्षम है , और यहां परिणाम हैं

परीक्षण छवि यूरी:
" https://wagonsclub.oss-cn-beijing.aliyuncs.com/static/carousel/carousel1_bg.jpg "

खंड_ड्रावे_सरल.एक्सएमएल

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

इसके साथ मुझे लॉगकैट पर एक संदेश मिलता है कि फ्रेस्को पहले से ही शुरू हो चुका है।

दूसरी विधि मैंने 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()
  ));
}

@clytras मुझे नहीं पता। मैंने इसे स्रोत कोड में अक्षम कर दिया है।

पिंग @oprisnik

ऐसा लगता है कि यह रिएक्ट नेटिव मुख्य पैकेज कॉन्फ़िगरेशन के माध्यम से सेट किया गया है: https://github.com/facebook/react-native/blob/6c0f73b3223968448bb186b82f06f6819068a21d/ReactAndroid/src/main/java/com/facebook/react/shell/MainPackageConfig.java

सुनिश्चित नहीं है कि आपको इसे आरएन के साथ कैसे सेट अप करना है, कभी कोशिश नहीं की।

@oprisnik क्या इस मुद्दे को ठीक करने की कोई योजना है?

मेरा मानना ​​है कि यह मुद्दा अभी भी आरएन रेपो का है। छवि डाउनसैंपलिंग एक ऐसी चीज है जो निस्संदेह स्मृति लागत को कम करने, दक्षता हासिल करने और बड़ी छवियों को लोड करते समय कम क्रैस होने के लिए है। मुझे लगता है कि इस मुद्दे को आरएन द्वारा इस तरह से संभाला जाना चाहिए कि यह अंतिम डेवलपर्स को यह चुनने की अनुमति देता है कि क्या वे छवि डाउनसमलिंग करना चाहते हैं या विकल्प/संपत्ति के रूप में नहीं। उदाहरण के लिए मेरे ऐप में, जहां मैं कुछ मंजिल योजनाओं को प्रस्तुत करने के लिए बड़ी छवियों का उपयोग करता हूं, जब उपयोगकर्ता फर्श योजना में ज़ूम करता है तो मुझे उच्च-रिज़ॉल्यूशन की आवश्यकता होती है। मैं हमेशा डिवाइस की क्षमताओं की जांच करता हूं और अगर यह कम रैम या कम-रेज वाला लो-एंड डिवाइस है, तो मैं छोटी और निचली रेज छवियों को लोड करता हूं।

resizeMethod घटक के लिए <Image/> resizeMethod संपत्ति है जिसमें scale और resize । RN करंट उस संपत्ति के scale मूल्य का सम्मान नहीं करता है, जो मुझे लगता है कि इसे छवि डाउनसैंपलिंग को अक्षम करना चाहिए और इसे केवल resize सेट करते समय सक्षम करना चाहिए।

resizeMethod

छवि का आकार छवि दृश्य के आयामों से भिन्न होने पर छवि का आकार बदलने के लिए उपयोग की जाने वाली तंत्र। ऑटो के लिए डिफ़ॉल्ट।

resize : एक सॉफ्टवेयर ऑपरेशन जो एन्कोडेड इमेज को डिकोड होने से पहले मेमोरी में बदल देता है। इसका उपयोग scale बजाय किया जाना चाहिए जब छवि दृश्य से बहुत बड़ी हो।

scale : छवि को घटाया या बढ़ाया जाता है। resize , scale तेज है (आमतौर पर हार्डवेयर त्वरित) और उच्च गुणवत्ता वाली छवियां उत्पन्न करता है। इसका उपयोग तब किया जाना चाहिए जब छवि दृश्य से छोटी हो। इसका उपयोग तब भी किया जाना चाहिए जब छवि दृश्य से थोड़ी बड़ी हो।

मैं वास्तव में इस @oprisnik @sunnylqm पर आपके विचार देखना

@clytras जैसा कि आपने कहा है, यह बिना स्पष्टीकरण के फ्रेस्को में एक व्यवहार परिवर्तन है। (मैं जो डेमो दिखाता हूं वह फ्रेस्को रेपो में उदाहरण ऐप है) इसलिए मुझे नहीं लगता कि इसका आरएन से कोई लेना-देना है।

@sunnylqm बेशक यह बिना स्पष्टीकरण के फ्रेस्को में एक व्यवहार परिवर्तन है, लेकिन RN को इस फ्रेस्को सुविधा को सक्षम/अक्षम करने का विकल्प

यह भी न भूलें कि व्यवहार का यह परिवर्तन निश्चित रूप से आईओएस में नहीं होता है, इसलिए हमें इसके बारे में कुछ करना होगा और चूंकि फ्रेस्को कॉन्फ़िगरेशन प्रतिक्रिया देशी में होता है, तो मुझे लगता है कि इस कॉन्फ़िगरेशन को आरएन डेवलपर्स को समाप्त करने के लिए उजागर किया जाना चाहिए।

BTW मैंने नवीनतम RN 0.61.2 के साथ फ्रेस्को 2.0.0 (मास्टर शाखा) को संकलित करने में कामयाबी हासिल की और DecodeProducer.java पर

मैंने फ्रेस्को रेपो निर्देशिका के अंदर एक local.properties फ़ाइल बनाई और विंडोज़ 64-बिट के लिए Android NDK संशोधन 19c x86_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\

हाँ, इसका समाधान आपके अनुप्रयोगों के लिए डाउनसैंपलिंग को अक्षम करना होगा, आरएन इनिशियलाइज़ेशन लॉजिक के माध्यम से या जब फ्रेस्को को इनिशियलाइज़ किया जाएगा।

@oprisnik तो मुझे लगता है कि हमें जेनरेट किए गए एंड्रॉइड प्रोजेक्ट के भीतर फ़्रेस्को को प्रारंभ करने के लिए एक बेहतर, स्वच्छ और आसान तरीका चाहिए, जिसे मैंने कोशिश की किसी भी विधि से हासिल नहीं किया। मैंने देखा है कि कुछ प्रोजेक्ट 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 को फ्रेस्को कॉन्फिगरेशन के साथ पास करने की कोशिश की और वह भी काम नहीं किया।

रिएक्ट नेटिव के लिए जेनरेट किए गए एंड्रॉइड प्रोजेक्ट के अंदर कस्टम कॉन्फ़िगरेशन के साथ फ्रेस्को लिब को इनिशियलाइज़ करने के तरीके के बारे में हमें एक साफ और प्रलेखित तरीके की आवश्यकता है।

https://frescolib.org/docs/resizing.html पढ़ने के बाद और अगर मैं सही ढंग से समझूं, तो downsampling resizing लिए एक प्रतिस्थापन है। तो @clytras मुझे लगता है कि आप सही हैं, अगर आकार बदलने के तरीके को स्केल करने के लिए सेट किया गया है तो इसे डाउनसम्पलिंग सक्षम नहीं करना चाहिए।

RN में कोड मुझे सही लगता है https://github.com/facebook/react-native/blob/aee88b6843cea63d6aa0b5879ad6ef9da4701846/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java#L505 ( यह इमेजपाइपलाइन के लिए एक शून्य मान पास करेगा, जो कोई आकार बदलने/डाउनसैंपलिंग का संकेत नहीं देता है)
लेकिन फ्रेस्को में यह शून्य आकार बदलने के विकल्प का सम्मान नहीं करता है https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 - एल169
यदि downsampleEnabled और downsampleEnabledForNetwork दोनों सत्य हैं, तो यह डाउनसैंपल हो जाएगा, भले ही आकार बदलने के विकल्प शून्य हों
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 शून्य नहीं है; जो केवल तभी सेट होता है जब 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_ संस्करणों के लिए भी काम नहीं करता था। जब मैं छुट्टियों से लौटूंगा तो कुछ दिनों में इसकी जांच करूंगा।

मुझे विश्वास है कि OR to AND परिवर्तन समस्या का समाधान करेगा क्योंकि यह बिल्कुल स्पष्ट है कि डाउनसैंपलिंग अब हमेशा लागू होती है यदि स्थिति में IS_RESIZING_DONE ध्वज नहीं है, इसलिए यह पूरी तरह से mDownsampleEnabled बायपास कर देता है। बेशक यह मामला होगा यदि डाउनसैंपल को अक्षम करने वाला कस्टम फ्रेस्को कॉन्फिगरेशन लागू हो जाता है और फ्रेस्को को पास कर दिया जाता है।

@clytras मुझे

आह भूल जाओ। पूछना भी लाजमी है। मैं इसका पता लगाऊंगा, और शायद एक पीआर में डालूंगा।

@CaptainN यह असभ्य नहीं है। बात यह है कि मैंने इसे किया है और सभी त्रुटियों का सामना किया है, इसलिए मुझे फ्रेस्को को स्थापित और पैच करने के निर्देशों के साथ स्टार्टर रेपो बनाने में बहुत कम समय लगेगा।

तो यहाँ यह है: https://github.com/clytras/RN061FrescoBuild

इसमें RN 0.61.5 । रेपो के पास विस्तृत निर्देश हैं। यह फ्रेस्को, क्लोन checkouts v2.1.0 और करने के लिए एक पैच लागू होता है DecodeProducer.java तो downsample कोड बाहर टिप्पणी करने के लिए। आपको केवल Android NDK डाउनलोड करना होगा और एक libraries/fresco/local.properties फ़ाइल जोड़नी होगी। यह सब रीडमी में विस्तृत है।

यदि आप निर्देशों और यार्न स्क्रिप्ट का पालन करते हैं तो आप मौजूदा RN>= 0.60 (_or पुराने संस्करण_) प्रोजेक्ट में फ्रेस्को लिब जोड़ सकते हैं।

@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। निश्चित रूप से मेरे लिए आदर्श चीज resizeMethod का सम्मान करने और गतिशील रूप से डाउनसैंपलिंग लागू करने के लिए RN होगी, लेकिन मुझे यकीन नहीं है कि यह संभव है।

संपादित करें

दरअसल मैं आंशिक रूप से गलत था। उस परिवर्तन के साथ (_जो कुल समझ में आता है_), RN सेट करता है .setDownsampleEnabled(false) जैसा कि हम यहां देख सकते हैं ReactAndroid/src/main/java/com/facebook/react/modules/fresco/FrescoModule.java#L155 , इसलिए, में डाउनसैंपलिंग को सक्षम करने के लिए, हमें उपरोक्त कोड के साथ फ्रेस्को को कॉन्फ़िगर करना होगा और .setDownsampleEnabled(true) । RN ने डिफ़ॉल्ट रूप से डाउनसैंपलिंग अक्षम कर दी है!

@clytras @CaptainN इस मुद्दे पर आपके काम के लिए बहुत-बहुत धन्यवाद। मैं एक्सपो का उपयोग करके इसका अनुभव कर रहा हूं और यदि संभव हो तो मैं अपने ऐप को निकाले बिना, समाधान खोजने के लिए वास्तव में उत्सुक हूं।

प्रतिक्रिया देशी-क्ली: 2.0.1
प्रतिक्रिया-मूल: 0.61.2

छोटा अपडेट। मुझे अब लंबे समय से इस मुद्दे का सामना नहीं करना पड़ा है। लेकिन मैं अनिश्चित हूं अगर ऐसा इसलिए है क्योंकि मैंने अधिकांश छवियों के लिए एक ही छवि के 3 अलग-अलग पैमानों ( @1x , @2x , @3x) का उपयोग करने के लिए स्विच किया है।

@enguerranws मुझे एक्सपो का उपयोग करने का बिल्कुल भी अनुभव नहीं है। @gorvinsky मैंने अभी RN 0.61.5 का उपयोग करके इसका परीक्षण किया है और यह काम नहीं करता है। दुर्भाग्य से बंडल किए गए छवि आकार ने कभी काम नहीं किया। जब मैंने पहली बार इस मुद्दे का सामना किया तो यह पहली चीज थी जिसका मैंने परीक्षण किया था।

मैंने एक प्रतिक्रिया-मूल-समुदाय/ क्ली टेम्पलेट बनाया है जिसमें आरएन 0.61.5 परियोजना है और स्रोत से फ्रेस्को बनाने के लिए आवश्यक संशोधन हैं। कस्टम प्रोजेक्ट नाम के साथ और स्रोत से फ्रेस्को को संकलित करने के लिए आवश्यक परिवर्तनों के साथ एक नया RN प्रोजेक्ट तैयार करने का यह एक आसान और त्वरित तरीका है। यह एंड्रॉइड एनडीके संशोधन 21 का भी उपयोग करता yarn 1.21 का उपयोग करके मैकोज़ और विंडोज़ पर इसका परीक्षण किया है।

जीथब रिपॉजिटरी:
एनपीएम टेम्प्लेट: @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 का उपयोग करके फ़्रेस्को को क्लोन/पैच करना होगा और फिर Android NDK इंस्टॉल करना होगा और Android NDK पथ के साथ android/libraries/fresco/local.properties ।

क्या यह प्रतिक्रिया-मूल फिक्सिंग में यह प्रतिबद्ध है? (अभी के लिए जारी नहीं)

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

विवरण में यह कहता है कि हम एक PipelineConfig पास कर सकते हैं जिसमें "setDownsampleEnabled" विशेषता है।

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

@enguerranws मुझे एक्सपो का उपयोग करने का बिल्कुल भी अनुभव नहीं है। @gorvinsky मैंने अभी RN 0.61.5 का उपयोग करके इसका परीक्षण किया है और यह काम नहीं करता है। दुर्भाग्य से बंडल किए गए छवि आकार ने कभी काम नहीं किया। जब मैंने पहली बार इस मुद्दे का सामना किया तो यह पहली चीज थी जिसका मैंने परीक्षण किया था।

मैंने एक प्रतिक्रिया-मूल-समुदाय/ क्ली टेम्पलेट बनाया है जिसमें आरएन 0.61.5 परियोजना है और स्रोत से फ्रेस्को बनाने के लिए आवश्यक संशोधन हैं। कस्टम प्रोजेक्ट नाम के साथ और स्रोत से फ्रेस्को को संकलित करने के लिए आवश्यक परिवर्तनों के साथ एक नया RN प्रोजेक्ट तैयार करने का यह एक आसान और त्वरित तरीका है। यह एंड्रॉइड एनडीके संशोधन 21 का भी उपयोग करता yarn 1.21 का उपयोग करके मैकोज़ और विंडोज़ पर इसका परीक्षण किया है।

जीथब रिपॉजिटरी:
एनपीएम टेम्प्लेट: @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 का उपयोग करके फ़्रेस्को को क्लोन/पैच करना होगा और फिर Android NDK इंस्टॉल करना होगा और Android NDK पथ के साथ android/libraries/fresco/local.properties ।

क्या मौजूदा परियोजना में इसे लागू करने का कोई तरीका है?

@kalmahik
इस तरह से प्रयास करें। (मेरा आरएन v0.61.4 है)
यह मौजूदा प्रोजेक्ट में @clytras 'पैच
और यह अब एंड्रॉइड सिम्युलेटर नहीं चला सकता है। मैं हमेशा वास्तविक उपकरणों पर परीक्षण कर रहा हूं। मैं

1. पैकेज में स्क्रिप्ट जोड़ें।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. एंड्रॉइड एनडीके डाउनलोड करें

मैंने r21 संस्करण का उपयोग किया।

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

1. अनज़िप करें और 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

@ जेफगुकांग
file-patch कमांड क्या है?

इसे विलय होने से क्या रोक रहा है? हमें इसे ठीक करने के बजाय इन पैच की आवश्यकता क्यों है (यह मानते हुए कि यह केवल एक समय की बाधा नहीं है - मैं पूरी तरह से इसे प्राप्त करता हूं, धक्का देने की कोशिश नहीं कर रहा हूं)?

@kalmahik file-patch एक NPM पैकेज CLI पैच टूल है।

@JeffGuKang आपको package.json में उन परिवर्तनों को शामिल करना होगा जो टेम्पलेट सेटअप स्क्रिप्ट के काम करने के लिए आवश्यक हैं।

@CaptainN मुझे नहीं लगता कि यह इतना आसान है, हालांकि मेरे पास अभी तक उपरोक्त कामों का परीक्षण करने के लिए समय नहीं है।

@clytras ओह यह एक ? धन्यवाद)

@kalmahik
इस तरह से प्रयास करें। (मेरा आरएन v0.61.4 है)
यह मौजूदा प्रोजेक्ट में @clytras 'पैच
और यह अब एंड्रॉइड सिम्युलेटर नहीं चला सकता है। मैं हमेशा वास्तविक उपकरणों पर परीक्षण कर रहा हूं। मैं

1. पैकेज में स्क्रिप्ट जोड़ें।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. एंड्रॉइड एनडीके डाउनलोड करें

मैंने r21 संस्करण का उपयोग किया।

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

1. अनज़िप करें और 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 स्क्रिप्ट के बाद स्रोत से फ्रेस्को को संकलित करने का प्रयास करते समय मुझे इस समस्या का सामना करना पड़ रहा है। मैं इसे मौजूदा RN(v0.59.9) प्रोजेक्ट में संकलित कर रहा हूं

इसके अलावा, MainApplication.java में फ्रेस्को कॉन्फिग जोड़ने की कोशिश की, लेकिन किस्मत नहीं

@ ravali121 ये चरण RN>= 0.60.x के लिए हैं, RN 0.59 या पुराने संस्करणों के लिए नहीं। इसे पुराने RN संस्करणों के लिए पैच किया जा सकता है, लेकिन चरण और फ़्रेस्को चेकआउट उस संस्करण का अनुसरण करना चाहिए जो उस विशिष्ट RN संस्करण के साथ आता है। मैं आरएन 0.61 के लिए फ्रेस्को 2.1.0 की जांच कर रहा हूं और आरएन 0.59 का एक अलग संस्करण है और निश्चित रूप से एक अलग पैच है, हालांकि पैच आवश्यक नहीं है, कोड परिवर्तन मैन्युअल रूप से संपादित करके लागू किया जा सकता है DecodeProducer.java । इसके अलावा, निर्भरता को संभालने के लिए अतिरिक्त ग्रेडल कॉन्फ़िगरेशन हैं।

यद्यपि आप इसे 0.59 के साथ काम कर सकते हैं, मेरा सुझाव है कि आप अपनी परियोजना को कम से कम 0.61 (या बेहतर 0.62) में अपग्रेड करें।

नमस्ते! पैच को मर्ज करने के लिए ईटीए पर कोई अपडेट? (धन्यवाद @clytras भयानक काम के लिए, मुझे आपके पैच को

@FRizzonelli पैच एक वर्कअराउंड है, यह वास्तव में इस मुद्दे का समाधान नहीं है और इसीलिए यह मुद्दा इतने लंबे समय तक खुला रहता है।
मुझे पैच और @react-native-community/cli टेम्पलेट की जांच करनी है और इसे नवीनतम RN संस्करण में अपग्रेड करना है।

@clytras मैं समझता हूं :( समस्या अभी है मैं एक्सपो पर प्रतिक्रिया-मूल-वेब के साथ एक छोटा पीओसी स्थापित करने की कोशिश कर रहा हूं, जिसमें एंड्रॉइड के लिए यह समस्या है। और एक छोटे डेमो के लिए, मैं बेदखल नहीं करना चाहता। लेकिन मुझे लगता है कि मुझे चाहिए :(

@clytras मैं समझता हूं :( समस्या अभी है मैं एक्सपो पर प्रतिक्रिया-मूल-वेब के साथ एक छोटा पीओसी स्थापित करने की कोशिश कर रहा हूं, जिसमें एंड्रॉइड के लिए यह समस्या है। और एक छोटे डेमो के लिए, मैं बेदखल नहीं करना चाहता। लेकिन मुझे लगता है कि मुझे चाहिए :(

कैसे के बारे में उपयोग करने के लिए jpg के बजाय प्रारूप png ? मुझे यकीन नहीं है कि इस मुद्दे को हल किया जा सकता है।

@clytras मैं समझता हूं :( समस्या अभी है मैं एक्सपो पर प्रतिक्रिया-मूल-वेब के साथ एक छोटा पीओसी स्थापित करने की कोशिश कर रहा हूं, जिसमें एंड्रॉइड के लिए यह समस्या है। और एक छोटे डेमो के लिए, मैं बेदखल नहीं करना चाहता। लेकिन मुझे लगता है कि मुझे चाहिए :(

कैसे के बारे में उपयोग करने के लिए jpg के बजाय प्रारूप png ? मुझे यकीन नहीं है कि इस मुद्दे को हल किया जा सकता है।

दुर्भाग्य से या तो काम नहीं करता है, और मुझे अल्फा परत के लिए पीएनजी की आवश्यकता है :(

मुझे आरएन 0.63.4 के साथ एक ही समस्या है।
960 x 13983 की छवि का आकार बहुत कम नमूना है, छवि के पाठ शायद ही पढ़ सकते हैं।
680 X 2538 की छवि का आकार भी नमूना है लेकिन काफी सभ्य है।
मैंने छवि के आकार का पता लगाने के लिए Image.getSize का उपयोग किया, और इससे ऊंचाई की गणना की (चौड़ाई 100% है)
छवियां सभी जेपीजी हैं।
मैंने @clytras की विधि को 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 नहीं करता है।

सभी को प्रणाम,

मैंने इस धागे से हर संभव समाधान की कोशिश की, लेकिन आरएन 0.64.2 और फ्रेस्को 2.5.0 के साथ।
मैं NDK v22.1.7171670 और gradle 4.2.1 का उपयोग कर रहा हूँ।

मैं वर्तमान में निम्नलिखित त्रुटि पर फंस गया हूं (क्या समस्या एंड्रॉइड-एमुलेटर से संबंधित है?):

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 दोनों का उपयोग कर रहा हूं
if(height < blurSize){ return <Image/> }else{ return <FastImage/> }