Краткое руководство по исправлению React Native без обновления

Сегодня я решил наконец обновить Xcode до версии 12.0.1, что означает, что симуляторы также были обновлены до iOS версии 14. Проект, над которым я сейчас работаю, основан на React Native версии 0.61.5. Обычно я откладываю обновление Xcode на несколько недель или пока у меня не появится свободное время, чтобы разобраться с побочными эффектами этого обновления.

Последний из них довольно драматичен и не позволяет компоненту Image отображать какие-либо изображения на iOS 14. Вот соответствующая проблема на Github и снимок экрана для справки.



Изображение не может отображать изображение в iOS 14 · Проблема № 29279 · facebook / react-native
Dismiss GitHub является домом для более чем 50 миллионов разработчиков, которые вместе работают над размещением и проверкой кода, управлением проекты и… github.com



Фоновое изображение отсутствует на экране входа в систему, как и все другие изображения в приложении.

Проблема исправлена ​​и объединена в последней версии React Native 0.63, но если вы не готовы обновить свой проект до последней версии React Native, прочтите ниже.

Нам нужно сделать патч. Мы будем использовать патч-пакет от npm, чтобы сделать патч, применить его, отслеживать его и автоматически повторно применять при необходимости.

Авторы этого пакета описывают его использование следующим образом.

patch-package позволяет авторам приложений мгновенно вносить и сохранять исправления для зависимостей« npm . Это жизненно важный пластырь для тех из нас, кто живет на переднем крае ».

Чтобы пропатчить ядро ​​React Native, выполните следующие действия.

$ npm install patch-package
  • Откройте RCTUIImageViewAnimated.m в своем любимом редакторе.
$ vi node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
  • Отредактируйте RCTUIImageViewAnimated.m

#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/*
  • Автоматически применять патч при каждом запуске установки npm, добавьте в скрипты в package.json следующее:
// package.json
"scripts": {
  ...
  "postinstall": "patch-package",
}

Теперь перезапустите приложение, и все будет исправлено.

Как всегда, не бойтесь реагировать в Твиттере, если у вас есть какие-либо вопросы, проблемы или просто свяжитесь с нами.

Лучший.