Приложение All Image/Fast Image в приложении React Native не работает в бета-версиях iOS 14 и Xcode 12

Я обновил свое устройство iPhone до бета-версии iOS 14 и Xcode 12. Тогда все изображения / быстрые изображения в моем проекте React Native не могут отображаться (которые хорошо работают на предыдущих iOS 13 и Xcode 11.5).

12 ответов

Это проблема с react-native <= 0.63.1 и iOS 14

Эта проблема исправлена ​​и объединена, чтобы реагировать на нативную последнюю версию. Но если вы хотите исправить свой проект сейчас или используете версию ниже 0.63.2, решение есть. (Спасибо https://bityl.co/3ksz)

ПЕРВОЕ РЕШЕНИЕ: Если вы можете обновить React Native

Обновите response-native до v0.63.2 или выше

Это было исправлено в этом выпуске: https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0632

ВТОРОЕ РЕШЕНИЕ: Если вы не можете обновить React Native

  1. ОТКРЫТЬ ФАЙЛ ИЗ:

node_modules / react-native / Libraries / Image / RCTUIImageViewAnimated.m

  1. ИЗМЕНИТЬ ИСТОЧНИК

Из

#pragma mark - CALayerDelegate

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }
}

Чтобы

#pragma mark - CALayerDelegate

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }
}
  1. СДЕЛАТЬ ПАТЧ

npx patch-package react-native

  1. СОЗДАВАЙТЕ ФАЙЛЫ ПАТЧОВ ДЛЯ GIT

git add patches/*

  1. ДОБАВИТЬ СКРИПТ ПАКЕТА ДЛЯ АВТОМАТИЧЕСКОГО ПРИМЕНЕНИЯ ПАТЧЕЙ

package.json

"scripts": {
  ...
  "postinstall": "patch-package",
}

Он будет исправлять все файлы исправлений всякий раз, когда вы устанавливаете пакеты.

Обновление до React Native 0.63.2. Исправлено в https://github.com/facebook/react-native/commit/b6ded7261544c703e82e8dbfa442dad4b201d428

Попробуйте использовать react-native+0.63.0.patchкак предлагается здесь https://github.com/facebook/react-native/issues/29279

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

Чтобы использовать патч,
запуститеnpm i -g patch-package
Сделайте новую папку пластырей
Создайте новый файл с именем реагировать-нативный +0.63.0.patch внутри этой папки
Добавить исходный код выше
прогонаpatch-package в корне проекта

Похоже, что в сборках Xcode 12 есть проблемы, чтобы исправить, я перейду к

node_modules > react-native > Библиотеки> Изображения> RCTUIImageViewAnimated.m

И найдите if (_currentFrame)

добавить блок else в блок if, как показано ниже в коде

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

Я использую React Native v0.60.6 с React Native Fast Image v8.1.5.

Обновление SDWebImage с помощью pod update SDWebImage работал у меня.

В частности, я перешел с SDWebImage v5.8.1 на v5.9.2.

Я бы не рекомендовал модифицировать node_modules. Для меня сработало следующее:

  1. npm install --save react-native-fix-image
  2. npx реагировать на родное исправление изображения
  3. перестроить проект

Информация о моей версии выглядит следующим образом:

      "react-native": "0.61.5",
"react-native-fast-image": "^7.0.2"

Это сработало для изображений, которые я показываю с помощью FastImage.

      pod repo remove trunk
pod update SDWebImage

Для использования компонента Image, поставляемого с react-native, вам необходимо изменить исходный код. В файле node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.mизмените - (void)displayLayer:(CALayer *)layer Метод может быть следующим:

      -(void)displayLayer:(CALayer *)layer
{
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
   } else {// Fix the bug that react-native 0.61.5 does not show pictures on xcode12
     [super displayLayer:layer];
   }
}

Вот обсуждение FastImage в github

Вот обсуждение response-native в github

Это связано с https://github.com/SDWebImage/SDWebImage/issues/3040.
Просто обновитеSDWebImage в твоем Podfile или удалить Podfile.lock и переустановите.

Если вы не используете последнюю версию react-native ( > 0.63.2) или не планируете обновляться до последней версии response-native. Тогда вы можете быть своим временным исправлением, попробуйте изменить node_modules, как показано ниже

Исправление Xcode 12 для IOS

Здесь можно найти хорошее решение https://ladwhocodes.com/react-native/images-not-loading-in-react-native-on-ios-14-devices-xcode-12/211/ . Пройдите через это и посмотрите, работает ли он для вас.

Он может отображать изображение после добавления [super displayLayer:layer]; если _currentFrame равен нулю, если я правильно понимаю, _currentFrame должен быть для анимированного изображения, поэтому, если это неподвижное изображение, мы можем использовать реализацию UIImage для обработки рендеринга изображения, не уверены, правильное ли это исправление.

//дорожка

node_modules> react-native> Библиотеки> Изображения>RCTUIImageViewAnimated.m

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

Ни один из предыдущих ответов не работал для меня.

Я решил это, удалив ios/Podsкаталог, затем запустите .

Так:

  1. cd ios
  2. rm -rf Pods
  3. pod install
Другие вопросы по тегам