Обновление до новых версий 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 для новой версии, поддерживающей реакцию.
Наконец-то ваше приложение готово к работе с обновленной версией!