Обновление до новых версий React Native предоставит вам доступ к большему количеству API-интерфейсов, представлений, инструментов разработчика и другим полезностям.

Обновление React Native может стать огромной проблемой для любого, кто поддерживает приложение, использующее библиотеку Facebook. Несмотря на то, что есть много контента и документации, которые помогают в этой задаче, по-прежнему сложно делать обновления, особенно в приложениях с множеством зависимостей. Не нужно упоминать старые проблемы со средой iOS, особенно с xcode.

Эта статья призвана помочь всем, кто переживает нечто подобное. В моем случае мне пришлось обновить версию 0.61.5 до 0.62.3, главным образом потому, что отладка и тестирование приложений, созданных на версиях ниже / ниже 0,62,0. Наша команда разработчиков раньше отлаживала с помощью Reactotron ( https://github.com/infinitered/reactotron), но для решения некоторых проблем нам потребовались инструменты, которые позволили бы нам пойти глубже, что-то более подробное.

В этой статье я покажу, как обновлять вручную (автоматические обновления, к сожалению, только усложнили мне задачу). Но я думаю, что вы можете проверить, работает ли в вашем случае, в официальной документации для react-native: https://reactnative.dev/docs/upgrading.

Еще одна ссылка, которая действительно полезна, - помощник по обновлению response-native, если ваша текущая и целевая версия для react-native отличаются от моей, вам следует проверить это:

Https://react-native-community.github.io/upgrade-helper/.

Перед обновлением

Береженого Бог бережет. Вам следует проверить систему отслеживания проблем React Native, чтобы узнать, есть ли какие-либо серьезные проблемы с новой версией, которые могут повлиять на вас. Вы должны проверить каждую используемую библиотеку и убедиться, что они не сообщают о проблемах совместимости с целевой версией.

С учетом сказанного, перейдем к коду.

Шаг 1. Обновление React-native и связанных

Перейдите в package.json и измените:

{
  "dependencies": {
    "react": "16.11.0",
    "react-native": "0.62.3"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@react-native-community/eslint-config": "^0.0.3",
    "babel-jest": "^24.1.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "jest-styled-components": "^6.3.4",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0"
  },
}

Затем запустите npm install. Если у вас возникнут проблемы, попробуйте удалить папку node_modules и запустить снова.

Затем перейдите в .gitattributes и добавьте:

# specific for windows script files 
*.bat text eol=crlf

в файле .flowconfig:

  • В разделе [библиотеки] замените node_modules/react-native/Libraries/react-native/react-native-interface.js на node_modules/react-native/interface.js.
  • В разделе [параметры] удалите строку, начинающуюся с module.name_mapper='^react-native$' ->, и замените строку, начинающуюся с module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif, на: module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
  • В разделе [версия] замените ^ 0.105.0 на ^ 0.113.0.

Шаг 2: Android

Во-первых, нам нужно изменить номер версии gradle в android / gradle / wrapper / gradle-wrapper.properties, отредактировать distributionUrl на:

distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip

Теперь перейдите в android / gradlew и замените условие из

if $cygwin ; then

to

if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then

Перейдите в свой android / app / build.gradle и:

  • Добавьте packageOptions в раздел android {}
packagingOptions {
pickFirst "lib/armeabi-v7a/libc++_shared.so"
pickFirst "lib/arm64-v8a/libc++_shared.so"
pickFirst "lib/x86/libc++_shared.so"
pickFirst "lib/x86_64/libc++_shared.so"
}
  • При необходимости укажите реализацию зависимости swiperefreshlayout.
implementation “androidx.swiperefreshlayout:swiperefreshlayout:1.0.0”

После этого перейдите в свой android / app / src / main / AndroidManifest.xml.

  • Замените android: configChanges = ”keyboard | keyboardHidden | Ориентация | screenSize ' на android: configChanges =” keyboard | keyboardHidden | Ориентация | screenSize | uiMode ”.
  • Добавьте строку android: launchMode = ”singleTask”.

Теперь перейдите в свой android / build.gradle:

  • Обновите инструменты сборки Android, изменив путь к классам
classpath("com.android.tools.build:gradle:3.5.2")

Теперь ваша установка Android готова!

Шаг 3: iOS (с CocoaPods)

Во-первых, вам нужно отредактировать ios / Podfile и внести следующие изменения:

  • Замените модуль с именем ReactCommon/jscallinvoker на ReactCommon/callinvoker.
  • Если вы собираетесь использовать Flipper в будущем, добавьте :modular_headers => true в конец строки, начинающейся с pod 'Yoga'.
  • Если у вас есть цель «Тесты» (такая строка, как target 'YourAppNameTests' do), замените строку inherit! :search_paths на inherit! :complete.
  • Замените platform: ios, ‘9.0’ на platform: ios, ‘10.0 ’.
  • Добавить требовать автоссылку require_relative ‘../node_modules/react-native/scripts/autolink-ios’
  • При необходимости добавьте зависимость модуля BVLinearGarident с помощью строки pod ‘BVLinearGradient’,: path = ›‘ ../node_modules/react-native-linear-gradient ’

После этого войдите в папку ios и удалите папки Podfile.lock и Pods с помощью команды rm -r Podfile.lock && rm -rf Pods/ и runpod install.

Если у вас возникли проблемы с xcode, следуйте этой инструкции на https://github.com/react-native-community/upgrade-helper/issues/191, чтобы настроить xcode для новой версии, поддерживающей реакцию.

Наконец-то ваше приложение готово к работе с обновленной версией!