React-native: لا يمكن للصورة إظهار الصورة في iOS 14

تم إنشاؤها على ٦ يوليو ٢٠٢٠  ·  125تعليقات  ·  مصدر: facebook/react-native

لا يمكن للصورة إظهار الصورة في iOS 14 ، ولكن يمكنها إظهار الموقع ، مثل:
المصدر = {
تتطلب ('./ images / add_scan_images.png')
}
/>

بيئة:
إصدار Xcode 12.0 بيتا (12A6159)
المحاكي: IPhone SE - الجيل الثاني - 14.0
"رد فعل": "16.11.0"،
"تفاعل أصلي": "0.62.2"

Image Author Feedback Issue Template iOS iOS 14

التعليق الأكثر فائدة

يمكنه عرض الصورة بعد إضافة [super displayLayer:layer]; إذا كان _currentFrame لا شيء

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

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

ال 125 كومينتر

:تحذير:معلومات البيئة مفقودة
:مصدر المعلومات:قد تفتقد مشكلتك إلى معلومات حول بيئة التطوير الخاصة بك. يمكنك الحصول على المعلومات المفقودة عن طريق تشغيل react-native info في وحدة التحكم.

أنا أواجه نفس القضايا

System:
    OS: macOS 10.16
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 493.38 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.4.0/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 27, 28, 29
      Build Tools: 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: ^4.5.1 => 4.5.1 
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

لكن الدردشة على Xcode-beta و iOS 14

لدي نفس المشكلة!

المشكلة نفسها...

المشكلة نفسها...

حسنًا ، لقد وجدت أن مشكلة الصور تحدث فقط عندما يتم إنشاء الإصدار باستخدام Xcode 12 Beta. عندما أقوم بإنشاء تصميم باستخدام Xcode 11.5 باستخدام iOS 14.0 Beta Device Support الذي تم الحصول عليه من هنا ، تعمل الصور بشكل جيد.

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

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

كيف يمكنني تطبيق هذا باستخدام حزمة التصحيح من فضلك؟ المبتدئين في استخدام حزمة التصحيح.

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

كيف يمكنني تطبيق هذا باستخدام حزمة التصحيح من فضلك؟ المبتدئين في استخدام حزمة التصحيح.

أهلا!

1.- تشغيل "حزمة تصحيح npm i -g"
2.- عمل مجلد جديد يسمى patches
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.63.0.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "حزمة التصحيح" على جذر المشروع

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

كيف يمكنني تطبيق هذا باستخدام حزمة التصحيح من فضلك؟ المبتدئين في استخدام حزمة التصحيح.

أهلا!

1.- تشغيل "حزمة تصحيح npm i -g"
2.- عمل مجلد جديد يسمى patches
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.63.0.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "حزمة التصحيح" على جذر المشروع

عملت شكرا جزيلا.

يمكنه عرض الصورة بعد إضافة [super displayLayer:layer]; إذا كان _currentFrame لا شيء

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

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

نفس المشكلة مع التفاعل الأصلي 0.62.x. أي فرصة يمكن إصلاح حزمة استدار؟ RN 0.63.x لا يزال مخطئًا للغاية ولا يمكننا الترقية.

نفس المشكلة مع التفاعل الأصلي 0.62.x. أي فرصة يمكن إصلاح حزمة استدار؟ RN 0.63.x لا يزال مخطئًا للغاية ولا يمكننا الترقية.

أعتقد أنه من الأفضل استخدام fork أو تطبيق حزمة التصحيح في الوقت الحالي.

تمكنت من حل المشكلة من خلال تطبيق التصحيح المقترح. أؤكد أن هذا يعمل بشكل جيد مع إصدارات RN السابقة:

آكانيوز: 0.62.2
Xcode: 12.0
محاكي iOS: 14

إضافة توضيح (للمبتدئين الآخرين إلى patch-package مثلي) يجب أن ينتقل المجلد "patches" إلى مستوى جذر المشروع.

يبدو أن استخدام مكتبة التصحيح لهذا الأمر مجرد مبالغة. هل سيكون من الصعب إضافته كتصحيح ثانوي إلى 0.62.2 (ربما يجعله 0.62.3؟). إنها حقًا ثلاثة أسطر من التعليمات البرمجية.

كما هو الحال الآن ، يحتوي 0.63.x على بعض الأخطاء الرئيسية ويبدو أنه لن يتم معالجتها في أي وقت قريبًا (0.64.x قاب قوسين أو أدنى) ، لذلك نحن عالقون مع 0.62 في المستقبل المنظور.

يبدو أن استخدام مكتبة التصحيح لهذا الأمر مجرد مبالغة.

لا تستخدم حزمة التصحيح ...

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

التصحيح يعمل بشكل مثالي هنا. 0.62.2

نفس المشكلة مع التفاعل الأصلي 0.62.x. أي فرصة يمكن إصلاح حزمة استدار؟ RN 0.63.x لا يزال مخطئًا للغاية ولا يمكننا الترقية.

مرحبًا يا رجل ، فقط أضف هذا إلى مجلد التصحيحات تحت رد الفعل الأصلي + 0.62.2.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..0ff66f3 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -275,6 +275,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }

diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

وتشغيل npx patch-package

هذا هو التصحيح لـ 0.61.5

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 01aa75f..24c1075 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -267,8 +267,10 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 - (void)displayLayer:(CALayer *)layer
 {
   if (_currentFrame) {
-    layer.contentsScale = self.animatedImageScale;
-    layer.contents = (__bridge id)_currentFrame.CGImage;
+      layer.contentsScale = self.animatedImageScale;
+      layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+      [super displayLayer:layer];
   }
 }

يمكنك دائمًا استبدال مكونات صورتك بـ FastImage. بهذه الطريقة لن تضطر إلى تصحيح أي شيء. يتم تحميل الصور بشكل أفضل أيضًا.

لأي شخص يستخدم الإصلاح patch-package ولديه إعداد CI / CD ، تذكر إضافة "postinstall": "patch-package" في package.json

يمكنك دائمًا استبدال مكونات صورتك بـ FastImage. بهذه الطريقة لن تضطر إلى تصحيح أي شيء. يتم تحميل الصور بشكل أفضل أيضًا.

FastImage ليست مكتبة محفوظة بها العديد من الأخطاء.

لماذا تعتقد أنه أفضل؟

FastImage يعمل يمكنك استخدامه

@ johnlim5847 أين تضيف "postinstall": "patch-package" هذا السطر في package.json؟

الحصول على هذا الخطأ عند تشغيل: حزمة التصحيح npx
تطبيق تصحيحات...
خطأ: تم العثور على ملف التصحيح للحزمة الأصلية التي تتفاعل والتي لم تكن موجودة في node_modules / رد فعل أصلي

shrimallamanoj يجب أن تذهب إلى https://github.com/ds300/patch-package أولاً

نعم ... شكرًا لك لقد اتبعت الخطوة وتم تطبيق التصحيح بنجاح ولم يتم طرح المشكلة عند تشغيل npx ولكن يبدو أن الحل لا يعمل بالنسبة لي .. سيء ... أي حل آخر؟

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

يا رفاق ، هذا التصحيح يعمل على React الأصلي 0.61.5 أيضًا. أستخدم نفس الحل.

1.- تشغيل "حزمة إضافة رقعة الغزل"
2.- عمل مجلد جديد يسمى patches على جذر المشروع.
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.61.5.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "yarn patch-package" على جذر المشروع أو ضعها على برنامج نصي بعد التثبيت

أتبع هذا الرابط لإصلاح مشكلة الصور في IOS14.

  • بناء نظيف في Xcode (CMD + Shift + K)
  • إعادة تعيين ذاكرة التخزين المؤقت مع بدء التفاعل الأصلي npx - إعادة تعيين ذاكرة التخزين المؤقت
  • البناء باستخدام XCode ، وكل شيء يعمل بشكل جيد مرة أخرى
    أنا أستخدم React original 0.62.2
    GL للجميع.

ليس إصلاحًا ولكن ملاحظة ، إذا حافظت على ذلكفي داخلعرض الصورة.

أرى نفس الخطأ ، ولكن فقط أثناء عملية التطوير. حدث ذلك بعد أن قمت بتحديث هاتفي وبرنامج xcode. (ios14، xcode12) الغريب أنه عندما أقوم بتنزيل تطبيقي من السوق ، لا يمكنني رؤية الصور الثابتة. يمكنني رؤية الصور عندما أحاول من هاتف مختلف. تم تدمير بيئة التطوير الخاصة بي تمامًا بعد التحديث.

يؤدي تحرير الملف يدويًا RCTUIImageViewAnimated.m كما يقترح tomcheung أعلاه إلى إصلاح المشكلة في الإصدار 0.61.5. شكرا لك!

الاقتراحات: لا تقم بالترقية إلى التصحيح فقط 0.63 . حاولت الترقية ، فشل الإصدار بسبب firebase ، code-push .

هل ما زلت تواجه هذه المشكلة ، فهل يمكن لأي شخص أن ينصحك بما إذا كان التصحيح هو أفضل حل للمشكلة حاليًا؟

هل يوجد رقعة لـ 0.61.2؟

هل يوجد رقعة لـ 0.61.2؟

لي. تم حلها.

0.62.2 تم حلها. لكن الجهاز الفعلي فشل ....
هل هناك حل؟

إذا (_currentFrame) {
layer.contentsScale = self.animatedImageScale ؛
layer.contents = (__bridge id) _currentFrame.CGImage ؛
} آخر {
[super dis playLayer: layer ] ؛
}

في: /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

إنه يعمل معي ، شكرًا لك

لي. تم حلها.

اسف لا افهم ماذا تقصد ما التصحيح الذي قمت بتطبيقه؟

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

للنسخة الأصلية المتفاعلة <0.63
يُرجى استخدام صورة تفاعلية أصلية سريعة بدلاً من صورة تفاعلية
لتفاعل عمل صورة أصلية سريعة ، يرجى تعطيل الرجوع إلى رد فعل أصلي سريع صورة
إنه يعمل على IOS 14!

لي. تم حلها.

اسف لا افهم ماذا تقصد ما التصحيح الذي قمت بتطبيقه؟

EmmanueleVilla قم بتطبيق هذا التصحيح https://github.com/facebook/react-native/issues/29279#issuecomment -658244428 ثم استخدم حزمة التصحيح للاحتفاظ بها :)

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

يا رفاق ، هذا التصحيح يعمل على React الأصلي 0.61.5 أيضًا. أستخدم نفس الحل.

1.- تشغيل "حزمة إضافة رقعة الغزل"
2.- عمل مجلد جديد يسمى patches على جذر المشروع.
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.61.5.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "yarn patch-package" على جذر المشروع أو ضعها على برنامج نصي بعد التثبيت

أنا أيضًا أجري 61.5 ، لقد نجح هذا بالنسبة لي! أظن أنه إذا كان لديك إصدار غير 61.5 ، فما عليك سوى إعادة تسمية ملف التصحيح لاستخدام الإصدار الخاص بك ، وعندما تقوم بتشغيل yarn patch-package ، سيتم تطبيق التصحيح لأنه يكتشف أن الإصدار الأصلي الخاص بك متطابق.

على سبيل المثال بالنسبة للإصدار 61.2 ، قم بتسمية ملف التصحيح الخاص بك react-native+0.61.2.patch

#import "RCTUIImageViewAnimated+WLAdd.h"
#import <objc/runtime.h>

<strong i="5">@implementation</strong> RCTUIImageViewAnimated (WLAdd)

+ (void)load {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    Method fromMethod = class_getInstanceMethod([self class], @selector(displayLayer:));
    Method toMethod = class_getInstanceMethod([self class], @selector(wl_displayLayer:));
    method_exchangeImplementations(fromMethod, toMethod);
  });
}

- (void)wl_displayLayer:(CALayer *)layer {
  UIImage *currentFrame = [self valueForKey:@"currentFrame"];
  CGFloat animatedImageScale = [[self valueForKey:@"animatedImageScale"] floatValue];
  if (currentFrame) {
      layer.contentsScale = animatedImageScale;
      layer.contents = (__bridge id)currentFrame.CGImage;
    } else {
      [super displayLayer:layer];
    }
}

<strong i="6">@end</strong>

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

tl ؛ dr اتبع التعليمات الموجودة على https://github.com/ds300/patch-package نفسها.

فيما يلي التعليمات التفصيلية:
هذا هو الإصلاح الذي تم إجراؤه على كود المصدر React Native v0.63.2 : https://github.com/facebook/react-native/commit/123423c2a9258c9af25ca9bffe1f10c42a176bf3

# make the change in `node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m` file
if (_currentFrame) {
  layer.contentsScale = self.animatedImageScale;
  layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
  [super displayLayer:layer];
}

# run patch-package to create a .patch file
npx patch-package react-native

# this will generate the patch file in the patches folder
# patches/react-native+0.61.4.patch

# then add to postinstall script
"scripts": {
  "postinstall": "patch-package"
 }

أتمنى أن يساعدك هذا!

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

كيف يمكنني تطبيق هذا باستخدام حزمة التصحيح من فضلك؟ المبتدئين في استخدام حزمة التصحيح.

أهلا!

1.- تشغيل "حزمة تصحيح npm i -g"
2.- عمل مجلد جديد يسمى patches
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.63.0.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "حزمة التصحيح" على جذر المشروع

حصلت على هذه المشكلة أثناء استخدام RN v0.61.2 ولكن هذا لا يزال يعمل معي. شكرا

للنسخة الأصلية المتفاعلة <0.63
يُرجى استخدام صورة تفاعلية أصلية سريعة بدلاً من صورة تفاعلية
لتفاعل عمل صورة أصلية سريعة ، يرجى تعطيل الرجوع إلى رد فعل أصلي سريع صورة
إنه يعمل على IOS 14!

لقد نجح الأمر بالنسبة لي!

حزمة التصحيح الغزل

لي. تم حلها.

اسف لا افهم ماذا تقصد ما التصحيح الذي قمت بتطبيقه؟

EmmanueleVilla قم بتطبيق هذا التصحيح # 29279 (تعليق) ثم استخدم حزمة التصحيح للاحتفاظ بها :)

أنت الرجل @ jkim430 شكرا

جربت جميع الحلول على 0.61.4 ، يتم تحميل الصور البعيدة بشكل جيد ولكن الأصول المحلية لن تظهر فقط.

أيه أفكار؟

شكرا لك xcode ..
image

يمكنه عرض الصورة بعد إضافة [super displayLayer:layer]; إذا كان _currentFrame لا شيء

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

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

عملت معي. شكرا! بالإضافة إلى ذلك ، يمكنك استخدام npx patch-package (مزيد من المعلومات هنا ) للاحتفاظ بهذا التغيير ولست بحاجة إلى الاستمرار في إصلاح إعادة تثبيت node_modules طوال الوقت.

هذا هو نوع الأخطاء التي تجعلني أرغب في فتح أي عمل آخر والتوقف عن أن أكون مبرمجًا.

https://github.com/huylvdev/react-native-fix-image يعمل معي

شكرًا جزيلاً ، بعد قضاء يوم واحد أخيرًا ، أصلحت هذه المساعدة

يمكنني أن أؤكد أنه يمكن أيضًا تطبيق هذا التصحيح على الإصدار 0.63.2. أعد تسمية الملف إلى (رد فعل أصلي + 0.62.2.patch).

يرجى إعادة فتح هذه المشكلة ،
هذا لا يزال لا يحل المشكلة.

https://github.com/huylvdev/react-native-fix-image يعمل معي

شكرًا جزيلاً ، بعد قضاء يوم واحد أخيرًا ، أصلحت هذه المساعدة

مرحبًا ، لقد حاولت استخدام react-native-fix-image لقد نجحت عندما أقوم بذلك
npx react-native-fix-image لكن عندما أقوم بإزالة node_modules وإعادة تثبيتها.
التطبيق لا يقوم بتحميل الصور.
هل واجهت أي مشكلة من هذا القبيل وهل يتعين علينا تشغيل الأمر npx في كل مرة لعرض الصور.

https://github.com/huylvdev/react-native-fix-image يعمل معي

شكرًا جزيلاً ، بعد قضاء يوم واحد أخيرًا ، أصلحت هذه المساعدة

هذا العمل بالنسبة لي! Thks !!

انها لا تعمل بالنسبة لي في وضع الإصدار ، أي فكرة؟

tomcheung شكرا جزيلا لك!
ضربت رأسي يومين لمعرفة ما هي المشكلة ...

بالنسبة لأولئك الذين يستخدمون إصدارات أقدم من React Native (على سبيل المثال ، 0.60.6) فإن التصحيح غير ممكن لأن الملف RCTUIImageViewAnimated.m غير موجود. لقد قمت بحل هذه المشكلة باستخدام React Native Fast Image v8.1.5 وترقية SDWebImage pod باستخدام pod update SDWebImage . وبشكل أكثر تحديدًا ، قمت بترقية SDWebImage من v5.8.1 إلى v5.9.2.

المصدر: https://github.com/DylanVann/react-native-fast-image/issues/702#issuecomment -653930858

الصور لا تظهر في نسخة الإصدار. (تم إخراج مشروع معرض 39) RN 0.63.3
تحديث: تحديث metro.config.js أصلح مشكلتي => https://forums.expo.io/t/assets-missing-only-in-ios-release-build-after-ejecting/42759

هل سيتم إصلاح هذا رسميًا على أي إصدار RN؟ آفاق ، المشكلة لا تزال قائمة.

هل سيتم إصلاح هذا رسميًا على أي إصدار RN؟ آفاق ، المشكلة لا تزال قائمة.

+1. بين الحين والآخر أعمل على مشروع قديم ولا بد لي من تصحيحه ..

فرق - git a / node_modules / رد فعل أصلي / مكتبات / صورة / RCTUIImageViewAnimated.mb / node_modules / رد فعل أصلي / مكتبات / صورة / RCTUIImageViewAnimated.m
الفهرس 21f1a06..2444713 100644
--- a / node_modules / رد فعل أصلي / مكتبات / صورة / RCTUIImageViewAnimated.m
+++ b / node_modules / رد فعل أصلي / مكتبات / صورة / RCTUIImageViewAnimated.m
-272،6 +272،9- (باطل) عرض

  • (باطل) طبقة العرض: طبقة (CALayer *)
    {

    • إذا (! _currentFrame) {

    • _currentFrame = self.image ؛

    • }

      إذا (_currentFrame) {

      layer.contentsScale = self.animatedImageScale ؛

      layer.contents = (__bridge id) _currentFrame.CGImage ؛

      فرق --git a / node_modules / رد فعل أصلي / سكربت / .packager.env b / node_modules / رد فعل أصلي / نصوص / .packager.env

      وضع الملف الجديد 100644

      الفهرس 0000000..361f5fb

      --- / ديف / فارغة

      +++ b / node_modules / رد فعل أصلي / مخطوطات / .packager.env

      -0،0 +1

      + تصدير RCT_METRO_PORT = 8081

شكرا! لقد نجح هذا بالنسبة لي في جميع مشاريع RN القديمة.
ما عليك سوى استبدال الإصدار الأصلي من React من مشروعك القديم بدلاً من 0.63 قبل إنشاء ملف react-native+0.63.0.patch .

لقد أنشأت مقطع فيديو وآمل أن يساعد هذا شخصًا ما.

نجح إصلاح @ AsbarAli بالنسبة لي ، إصدار RN: 0.61.5.

يمكنه عرض الصورة بعد إضافة [super displayLayer:layer]; إذا كان _currentFrame لا شيء
إذا فهمت بشكل صحيح ، يجب أن يكون _currentFrame للصورة المتحركة ، لذلك إذا كانت لا تزال صورة ، فيمكننا استخدام تطبيق UIImage للتعامل مع عرض الصورة ، ولست متأكدًا مما إذا كان إصلاحًا صحيحًا.
https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

عملت معي. شكرا! بالإضافة إلى ذلك ، يمكنك استخدام npx patch-package (مزيد من المعلومات هنا ) للاحتفاظ بهذا التغيير ولست بحاجة إلى الاستمرار في إصلاح إعادة تثبيت node_modules طوال الوقت.

هذا هو نوع الأخطاء التي تجعلني أرغب في فتح أي عمل آخر والتوقف عن أن أكون مبرمجًا.

من المهم أن تقوم بتشغيل npx patch-package react-native ليتم تطبيق التصحيح.

مرحبًا بالجميع ، هل يمكن لأي شخص أن يؤكد أنه تم دمج هذا في النواة؟

في حين أن حزمة التصحيح هي حل لا ينبغي أن تكون حلاً دائمًا.

سأبقي هذا مفتوحًا حتى يمكنني التحقيق.

ألا يخططون لإصلاح هذا؟

يبدو أنه تم إصلاحه. فقط لن يعود إلى الإصدارات السابقة. أعتقد أن الإصلاح في 63.3

نجح إصلاح @ AsbarAli بالنسبة لي ، إصدار RN: 0.61.5.

كيف فعلتها؟ أنا أستخدم RN 61.2

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

كيف يمكنني تطبيق هذا باستخدام حزمة التصحيح من فضلك؟ المبتدئين في استخدام حزمة التصحيح.

أهلا!
1.- تشغيل "حزمة تصحيح npm i -g"
2.- عمل مجلد جديد يسمى patches
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.63.0.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "حزمة التصحيح" على جذر المشروع

حصلت على هذه المشكلة أثناء استخدام RN v0.61.2 ولكن هذا لا يزال يعمل معي. شكرا

مرحبا يمكنك مساعدتي؟ لدي أيضًا RN 61.2 ولكنه لا يعمل على الإطلاق. قد لا تظهر صور الملاحة السفلية

مرحبًا rjtubera ، من المفترض أن يعمل التصحيح مع 0.63 على الرغم من أنه يعمل أيضًا مع إصدار 0.61.5 من React Native. ربما إذا حاولت الترقية من React Native 0.61.2 إلى 0.61.5 ، وأعدت تطبيق الخطوات التي نقلتها ، فقد تنجح.

إذا لم يفلح ذلك ، فحاول الترقية إلى 0.63 وافعل الشيء نفسه. على الرغم من الحذر لأن بعض مكوناتك قد تنكسر. يجب عليك اختبار كل مكون بعد الترقية للتأكد من أن كل شيء لا يزال يعمل بشكل جيد (على iOS و Android).

واجهت هذه المشكلة ، لقد أصلحتها باتباع الخطوات على هذا الرابط
https://github.com/facebook/react-native/pull/29420#issuecomment -707435412

شكرًا Alabi ، لقد قمت بفرز المشكلة أيضًا عن طريق تصحيح React Native. تعمل بشكل جيد حتى الآن 😊

من: Alabi Temitope Wahab [email protected]
الرد على: facebook / رد فعل-native [email protected]
التاريخ: الثلاثاء 13 أكتوبر 2020 الساعة 03:56
إلى: facebook / رد فعل أصلي رد فعل[email protected]
نسخة إلى: Kieran Desmond [email protected] ، [email protected]
الموضوع: Re: [facebook / رد فعل أصلي] لا يمكن للصورة إظهار الصورة في iOS 14 (# 29279)

واجهت هذه المشكلة ، لقد أصلحتها باتباع الخطوات على هذا الرابط

29420 (تعليق) https://github.com/facebook/react-native/pull/29420#issuecomment-707435412

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرةً ، أو قم بعرضه على GitHub https://github.com/facebook/react-native/issues/29279#issuecomment-707436028 ، أو قم بإلغاء الاشتراك https://github.com/notifications/unsubscribe-auth/AIENJUWD2RES5AC52CT4MG3SKOXURANCNXZAOR4 .

لقد قمت بالترقية إلى إصدار 0.63 من رد الفعل الأصلي ، لكنني أواجه نفس المشكلة ، هل يمكن لأي شخص مساعدتي؟

بالنسبة لأولئك الذين يستخدمون إصدارات أقدم من React Native (على سبيل المثال ، 0.60.6) فإن التصحيح غير ممكن لأن الملف RCTUIImageViewAnimated.m غير موجود. لقد قمت بحل هذه المشكلة باستخدام React Native Fast Image v8.1.5 وترقية SDWebImage pod باستخدام pod update SDWebImage . وبشكل أكثر تحديدًا ، قمت بترقية SDWebImage من v5.8.1 إلى v5.9.2.

المصدر: DylanVann / رد فعل أصلي سريع صورة # 702 (تعليق)

يعمل بشكل مثالي.

يتضمن الإصدار 8.3.2 من رد فعل-أصلي-سريع-صورة النسخة المطورة من SDWebImage ، لذلك لا حاجة إلى pod update !

https://www.npmjs.com/package/react-native-fix-image
العمل لدي

عملت من أجلي أيضا. 👍

لقد نجحت الترقية من React-Native 0.63.1 إلى 0.63.2 بالنسبة لنا.

أواجه نفس المشكلة على RN 0.62.2 على Xcode 12.0.1. و ios 14 . اي حل؟

أواجه نفس المشكلة على RN 0.62.2 على Xcode 12.0.1. و ios 14 . اي حل؟

@ ghasemikasra39 كنت أواجه نفس المشكلة مع نفس الإصدارات الخاصة بك. نجح تثبيت صورة رد الفعل الأصلي لإصلاح الصورة بالنسبة لي.

RutsSantos الحق في هذا عملت أيضا بالنسبة لي!

1) تثبيت npm - حفظ صورة رد فعل أصلي
2) npx رد فعل أصلي الإصلاح صورة
3) إعادة بناء المشروع

لقد نجحت الترقية من React-Native 0.63.1 إلى 0.63.2 بالنسبة لنا.

هذا عمل لي.

هذا عمل لي. شكرا JordanRosas

JordanRosas عملت معي بشكل رائع أيضًا ، شكرًا لك

قم بترقية النسخة الأصلية التي تتفاعل من 0.62.2 إلى 0.63.3 ولا حاجة إلى تصحيح أو تثبيت وحدات npm بعد الآن

0.62.3 غير موجود:

0.63.3
0.63.2
0.63.1
0.63.0 3.0
0.63.0-rc.1
0.63.0-rc.0
❯ 0.62.2
0.62.1
0.62.0

0.63.3
0.63.2
0.63.1
0.63.0
0.63.0-rc.1
0.63.0-rc.0
❯ 0.62.2
0.62.1
0.62.0

تصحيح

لا يستطيع البعض منا الترقية حتى يتم حل هذا الخطأ الهام في RN: https://github.com/facebook/react-native/issues/29451

لذلك نحن إما عالقون مع تصحيح القرد 0.62.x أو إصدار 0.63.x bugged.

يمكنه عرض الصورة بعد إضافة [super displayLayer:layer]; إذا كان _currentFrame لا شيء

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

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

إنها تعمل. شكرا لك!

إذا كنت لا ترغب في تثبيت أي حزم أو تحرير node_modules مباشرةً ، يمكنك محاولة إضافة خطاف مرحلة preinstall في ملف podfile كما في https://stackoverflow.com/a/64495360/7477198 هذا عملت من أجلي. هذا هو أكثر ودية.

بالنسبة لي ، حتى على RN 63.3 ، لا تظهر الصور على جهاز مادي. كحل بديل ، قمت بترميز الصور في الأساس 64 هنا: https://www.base64-image.de/ ثم استخدمتها كمكون $ # $ source Image بدلاً من require('imagePath')

يمكنه عرض الصورة بعد إضافة [super displayLayer:layer]; إذا كان _currentFrame لا شيء

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

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

أنت رجل عبقري ، لقد أنقذت حياتي!

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

كيف يمكنني تطبيق هذا باستخدام حزمة التصحيح من فضلك؟ المبتدئين في استخدام حزمة التصحيح.

أهلا!

1.- تشغيل "حزمة تصحيح npm i -g"
2.- عمل مجلد جديد يسمى patches
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.63.0.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "حزمة التصحيح" على جذر المشروع

ثانكس
عملت معي بشكل جيد على RN 0.61.5
أضفت ملف تصحيح يسمى react-native+0.61.5.patch

أيضًا إصلاح لـ DylanVann / رد فعل أصلي سريع
cd ios && pod update SDWebImage

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

@ فيلق زفير شكرا على الإصلاح! هل RCT_METRO_PORT مطلوب هنا ، أو شيء محدد لمشروعك؟

RN 0.59.0 على Xcode 12.0.1. و iOS 14. أي حل؟

RN 0.59.0 على Xcode 12.0.1. و iOS 14. أي حل؟

3 حلول:

  1. قم بإصلاح المشكلة يدويًا داخل node_modules
  2. استخدم مكتبة الإصلاح هذه https://www.npmjs.com/package/react-native-fix-image
  3. التحديث إلى React Native 0.63.3

أستطيع أن أؤكد أن هذا لا يزال موجودًا في --configuration=Release ، حتى على "react-native": "0.63.3" . يعمل بشكل جيد في --configuration=Debug لكن.

https://www.npmjs.com/package/react-native-fix-image لا يساعد ولكنه يكسر البناء
الافراج عن التكوين مع هذا الخطأ:

.../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m:278:5: error: expected expression
  } else {
    ^

أيضًا ، لا يواجه مستخدمو تطبيقي أي تحميل للصور (من عنوان url) على نظام التشغيل iOS ، لكن هذا لا يحدث للجميع فقط لبعض الأشخاص. الرجاء إصلاح هذا. أنا أستخدم React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- رابط لصورة توضح هذه المشكلة

douglasjunior يعمل بشكل جيد! شكرا جزيلا!

RutsSantos الحق في هذا عملت أيضا بالنسبة لي!

  1. تثبيت npm - حفظ صورة رد الفعل الأصلي
  2. npx رد فعل أصلي إصلاح صورة
  3. مشروع إعادة البناء

عملت لي 🎉🎉🎉🎉🎉

RN 0.59.0 على Xcode 12.0.1. و iOS 14. أي حل؟

3 حلول:

  1. قم بإصلاح المشكلة يدويًا داخل node_modules
  2. استخدم مكتبة الإصلاح هذه https://www.npmjs.com/package/react-native-fix-image
  3. التحديث إلى React Native 0.63.3

Q آخر ، أستخدم .1 يدويًا داخل node_modules إنه يعمل جيدًا في عرض الصورة من الشبكة ، لكن لا يمكنني إظهار الصورة المحلية ،

أيضًا ، لا يواجه مستخدمو تطبيقي أي تحميل للصور (من عنوان url) على نظام التشغيل iOS ، لكن هذا لا يحدث للجميع فقط لبعض الأشخاص. الرجاء إصلاح هذا. أنا أستخدم React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- رابط لصورة توضح هذه المشكلة

أجد مشكلة حدثت لي. لم يكن WebP مدعومًا في iOS 13 لذلك كنت بحاجة إلى تثبيت صورة تفاعلية أصلية سريعة مع SDWebImageWebPCoder pod.

لا أفترض أن أي شخص لديه برنامج نصي لإنشاء مركز تطبيقات Microsoft لإصلاح هذا أيضًا؟

لمعلوماتك ، تمكنت أيضًا من التغلب على هذا باستخدام FastImage الذي تم إصلاحه بعد ترقية SDWebImage https://github.com/DylanVann/react-native-fast-image/issues/730 (لا يمكنني الترقية إلى 0.63 الآن لأنه ينكسر عمل آخر ، سأنتقل في النهاية إلى أحدث إصدار)

في حالتي ، كان لدي صور متحركة من RN عادي ، لكنني تمكنت من استخدام FastImage لأولئك الذين يستخدمون أيضًا

const AnimatedImage = Animated.createAnimatedComponent(FastImage)

<AnimatedImage source={require('....')} />

بدلاً من ذلك ، يجب أن تعمل حزمة إصلاح الصورة ، إذا لم تعمل على Appcenter (@ krisbaum74) ، فيجب أن تكون قادرًا على فعل الشيء نفسه عن طريق إنشاء appcenter-pre-build.sh في جذر الريبو وإضافة البرنامج النصي مع الإصلاح هناك

أنا أستخدم 0.63.3 من ردود الفعل الأصلية وما زلت أواجه هذه المشكلة على iOS 14.1. هذا مطبق بالفعل في هذا الإصدار. أي أفكار حول كيفية إصلاح ذلك؟

أنا أستخدم 0.63.3 من ردود الفعل الأصلية وما زلت أواجه هذه المشكلة على iOS 14.1. هذا مطبق بالفعل في هذا الإصدار. أي أفكار حول كيفية إصلاح ذلك؟

إذا قمت بالترقية إلى 0.63.3 ، فقد تواجه مشاكل في هذا الرمز ، فجرب مكتبة الإصلاح هذه https://www.npmjs.com/package/react-native-fix-image

أنا أستخدم 0.63.3 من ردود الفعل الأصلية وما زلت أواجه هذه المشكلة على iOS 14.1. هذا مطبق بالفعل في هذا الإصدار. أي أفكار حول كيفية إصلاح ذلك؟

إذا قمت بالترقية إلى 0.63.3 ، فقد تواجه مشاكل في هذا الرمز ، فجرب مكتبة الإصلاح هذه https://www.npmjs.com/package/react-native-fix-image

لقد قمت بالفعل بالترقية إلى 0.63.3 وهذه المكتبة لا تحل المشكلة (يتم تحميل الصور على جهاز محاكاة ولكن ليس على جهاز مادي.

أنا أستخدم 0.63.3 من ردود الفعل الأصلية وما زلت أواجه هذه المشكلة على iOS 14.1. هذا مطبق بالفعل في هذا الإصدار. أي أفكار حول كيفية إصلاح ذلك؟

إذا قمت بالترقية إلى 0.63.3 ، فقد تواجه مشاكل في هذا الرمز ، فجرب مكتبة الإصلاح هذه https://www.npmjs.com/package/react-native-fix-image

لقد قمت بالفعل بالترقية إلى 0.63.3 وهذه المكتبة لا تحل المشكلة (يتم تحميل الصور على جهاز محاكاة ولكن ليس على جهاز مادي.

كانت مشكلتي متعلقة بنسخ الأصول لبناء الإنتاج ، وكان هناك ارتباط سيئ كما هو موضح هنا ثم أعد إنشاء الحزمة وحاول مرة أخرى

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

كيف يمكنني تطبيق هذا باستخدام حزمة التصحيح من فضلك؟ المبتدئين في استخدام حزمة التصحيح.

أهلا!

1.- تشغيل "حزمة تصحيح npm i -g"
2.- عمل مجلد جديد يسمى patches
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.63.0.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "حزمة التصحيح" على جذر المشروع

شكرا جزيلا!!!! لقد أنقذت يومي حرفياً 🙏 ❤️

يمكنه عرض الصورة بعد إضافة [super displayLayer:layer]; إذا كان _currentFrame لا شيء

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

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

عملت لي !!! 👍

لقد قمنا أيضًا بالترقية إلى 0.63.3 ، ونواجه هذه المشكلة على iOS 14.
نقوم بتنزيل الملفات (الصور فيما بينها) باستخدام حزمة RN-fetch-blob ، وتحميل هذه الصور المحلية باستخدام مكون الصورة.

@ krisbaum74.

لا أفترض أن أي شخص لديه برنامج نصي لإنشاء مركز تطبيقات Microsoft لإصلاح هذا أيضًا؟

استخدم react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

كيف يمكنني تطبيق هذا باستخدام حزمة التصحيح من فضلك؟ المبتدئين في استخدام حزمة التصحيح.

أهلا!

1.- تشغيل "حزمة تصحيح npm i -g"
2.- عمل مجلد جديد يسمى patches
3.- قم بإنشاء ملف جديد يسمى رد فعل أصلي + 0.63.0.patch داخل هذا المجلد
4.- أضف شفرة المصدر أعلاه.
5.- قم بتشغيل "حزمة التصحيح" على جذر المشروع

ما عليك سوى اتباع الإصلاح أعلاه وإنشاء ملف يتفاعل مع المحتوى + 0.63.0.patch

بعد ذلك ، أضف في appcenter-pre-build.sh الخاص بك

حزمة التصحيح npm i -g
حزمة التصحيح

سيؤدي هذا إلى إضافة الإصلاح أعلاه في بناء AppCenter الخاص بك.

كان لدي هذا على نظام التشغيل iOS واستخدمت صورة npx والتي تعمل بشكل رائع. أشعر بالفزع الآن لأن المشكلة لا تزال قائمة على Android!

لم يذكر هنا Android - هل أنا الوحيد؟

أنا أتأرجح "رد الفعل الأصلي": "0.61.5"

_const Image = Animatable.createAnimatableComponent (FastImage) ؛ _
لا يعمل بشكل صحيح!

الرسوم المتحركة = {'bounceIn'} لا يعمل

"تفاعل أصلي": "0.63.3"
"رد فعل أصلي سريع صورة": "^ 8.3.4"
"رد فعل أصلي متحرك": "^ 1.3.3"

أعلم أن هذا يعتبر تصحيحًا لـ 0.63 ، لكن يمكنني أن أؤكد أن هذا يعمل أيضًا على 0.62. 👍

لا يزال لا يعمل على IOS 14.2 ، Xcode 12.2 ، تفاعل أصلي 0.63.4
أي إصلاح مقترح لا يساعد
تحديث
0.63.4 - يعرض الصور البعيدة بدون مشاكل وبدون أي تصحيح ، لكن الصور المحلية لا تعمل مع التصحيح أو بدونه

لدي مشروع به تفاعل أصلي 0.63.3 ، التصحيح لا يعمل معي. قبل تطبيق التصحيح ، تحققت من فئة RCTUIImageViewAnimated وهي تحتوي بالفعل على رمز التصحيح ، ومن المتوقع أن هذا هو # 29420 مدمج بالفعل في 0.63.3 وفقًا للتغيير 0.63.2 CHANGELOG https://github.com/react-native- المجتمع / النشرات / blob / master / CHANGELOG.md # v0632. لذلك لن يصلح التصحيح ، أعتقد أنه كان صالحًا في 0.62.2 لكنني أخشى أن التغييرات في 0.63.3 أدت إلى كسر تحميل الصور المحلية مرة أخرى. وهذا يفسر سبب تراجع بعض المطورين إلى <0.63.2 وتطبيق التصحيح وأصبحت الصور مرئية مرة أخرى. أفضل الحصول على 0.63.2 الذي يحتوي على الإصلاح. على أي حال ، أنا متردد في الرجوع إلى إصدار أقدم ، نعم حتى بالنسبة لإصدار واحد مرة أخرى لأنني لا أريد أن أعلق في الماضي ؛-). لقد أنشأت حلاً يعمل على نهايتي.

استنادًا إلى حقيقة أنه يتم تحميل صور _me_ عند استخدام عنوان URL خارجي _ (RN 0.63.3).
الحل الخاص بي ،

  • أنا أتبع نمط الأصول المختلطة ، يمكنك الحصول على المرجع هنا https://reactnative.dev/docs/images#images -from-hybrid-apps-resources
  • أضف الصور إلى مكتبة أصول iOS / Android. يمكن القيام بذلك يدويًا ، عن طريق البرنامج النصي ، XCode ، ...
  • قم بالإشارة إلى الصورة عن طريق _local_ URI الخاص بها بدلاً من _react مرجع نظام الملفات الملائم الأصلي_ ، مثال iOS أدناه
<Image
  source={{ uri: 'app_icon' }}
  style={{ width: 40, height: 40 }}
/>
  • إنشاء وظيفة مساعدة للحصول على URI للأصل المرجعي لنظام التشغيل iOS أو Android اعتمادًا على النظام الأساسي. يرجى قراءة الوثائق (https://reactnative.dev/docs/images#images-from-hybrid-apps-resources) ولاحظ الاختلافات في تنسيق URI.
  • بدأت الصور تظهر على تطبيق iOS 14.2 !! لقد اختبرت مع التطبيق الموزع من متجر التطبيقات وتثبيت Ad Hoc

إنه يعمل (بالنسبة لي) ولكن ، من الجوانب السلبية ،

  • تعتبر طريقة React Native للمراجع ملائمة جدًا لوضعها جانبًا ، وآمل أن يتم حل هذه المشكلة ويمكنني العودة إلى طبيعتها.
  • الاحتفاظ بثلاثة مجلدات أصول متزامنة ... نعم ، إنه من خلال البرنامج النصي ولكن المطورين سينسون بسهولة ، وفي غضون بضعة أشهر من الآن ، سيقضي شخص ما يومين في اكتشاف سبب عدم ظهور الصور ليكتشف أن البرامج النصية قديمة أو أي شيء آخر يمكنك التفكير فيه.
  • الصور مفقودة من المحاكي الخاص بي ، وسأبحث عن إضافة شرطي لتحميل الصور من مجلد الأصول الأصلية المتفاعلة في حالة التشغيل من جهاز محاكاة. يمكن أن يساعد هذا lib https://github.com/react-native-device-info/react-native-device-info (لم أحاول بعد).
    آمل أن يتمكن شخص ما من الاستفادة من هذا الحل البديل.

RutsSantos الحق في هذا عملت أيضا بالنسبة لي!

  1. تثبيت npm - حفظ صورة رد الفعل الأصلي
  2. npx رد فعل أصلي إصلاح صورة
  3. مشروع إعادة البناء

عملت لي 🎉🎉🎉🎉🎉

لم يعمل مع RN 0.61

أنا أستخدم RN 0.61 وأي حل لا يعمل معي. الرجاء ، لديك أي حل آخر؟

أنا أستخدم RN 0.61 وأي حل لا يعمل معي. الرجاء ، لديك أي حل آخر؟

https://www.npmjs.com/package/react-native-fix-image

هذه المكتبة الخاصة بي ، لا تزال تعمل بشكل جيد مع RN 0.61

أنا أستخدم RN 0.61 وأي حل لا يعمل معي. الرجاء ، لديك أي حل آخر؟

https://www.npmjs.com/package/react-native-fix-image

هذه المكتبة الخاصة بي ، لا تزال تعمل بشكل جيد مع RN 0.61

مرحبًا Huy ، لقد حاولت خطوة بخطوة كدليل أعلاه ، فقد أظهر صورة الإصلاح تم. لكن الصورة لا تزال غير معروضة على نظام iOS 14. لا تزال إصدارات iOS الأخرى تعرض الصورة بشكل طبيعي.
أستخدم RN 0.61 و ios 14.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات