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

Question

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

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

22

react-native image ios14 xcode12

Источник

user9054688 27 июн '20 в 19:43

12 ответов

Другие вопросы по тегам react-native image ios14 xcode12

user3498907 01 окт '20 в 12:39 2020-10-01 12:39 · Answer 1 · 2020-10-01 12:39

Это проблема с 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

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

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

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

Из

#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];
  }
}

СДЕЛАТЬ ПАТЧ

npx patch-package react-native

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

git add patches/*

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

package.json

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

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

user882847 11 авг '20 в 09:07 2020-08-11 09:07 · Answer 2 · 2020-08-11 09:07

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

2

Источник

user882847 11 авг '20 в 09:07

user8726172 20 июл '20 в 05:33 2020-07-20 05:33 · Answer 3 · 2020-07-20 05:33

Попробуйте использовать 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 в корне проекта

user228755 25 ноя '20 в 17:25 2020-11-25 17:25 · Answer 4 · 2020-11-25 17:25

Похоже, что в сборках 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];
  }

user2437610 02 окт '20 в 20:17 2020-10-02 20:17 · Answer 5 · 2020-10-02 20:17

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

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

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

1

Источник

user2437610 02 окт '20 в 20:17

user562073 03 дек '20 в 21:38 2020-12-03 21:38 · Answer 6 · 2020-12-03 21:38

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

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

1

Источник

user562073 03 дек '20 в 21:38

user5713090 21 янв '21 в 04:37 2021-01-21 04:37 · Answer 7 · 2021-01-21 04:37

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

      "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

user1375601 05 июл '20 в 22:57 2020-07-05 22:57 · Answer 8 · 2020-07-05 22:57

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

1

Источник

user1375601 05 июл '20 в 22:57

user4007257 20 сен '20 в 22:28 2020-09-20 22:28 · Answer 9 · 2020-09-20 22:28

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

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

1

Источник

user4007257 20 сен '20 в 22:28

user4779229 05 май '21 в 09:10 2021-05-05 09:10 · Answer 10 · 2021-05-05 09:10

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

0

Источник

user4779229 05 май '21 в 09:10

user11408662 05 июл '21 в 17:01 2021-07-05 17:01 · Answer 11 · 2021-07-05 17:01

Он может отображать изображение после добавления [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];
  }

user5077434 05 апр '22 в 14:49 2022-04-05 14:49 · Answer 12 · 2022-04-05 14:49

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

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

Так:

cd ios
rm -rf Pods
pod install

0

Источник

user5077434 05 апр '22 в 14:49