[Эксклюзивный] Реагируйте нативное руководство по обновлению версии

предисловие

React Native, как кросс-энд фреймворк, имеет одну из самых неприятных проблем, а именно:обновление новой версии.尤其是遇到大版本更新，JavaScript、iOS 和 Android 三端的配置构建文件都有非常大的变动，有时候三者的配置文件又互相耦合在一起，往往牵一发而动全身。

внешний интерфейс.

提示：因为掘金修改了审核规则，每次修改和新增内容都会隐藏文章重新审核，建议阅读博客原文获得最佳阅读体验

👉

Если вы считаете, что статья полезна для вас, вы должны помнитьподобноО 🌟, спасибо, мне это очень важно!

1. Заточка ножей без случайного рубления дров

Я думаю, что эта часть знаний является самой важной, все-такиОбновление версии вечное, но процесс работы неизменен.

Прежде чем подробно представить строительные инструменты на каждом конце, давайте отложим в сторону различные технические детали и начнем со всего жизненного цикла проекта, чтобы увидеть, как технически планируется большинство продуктов:

Ранние продукты: Архитектура относительно проста, весь проект занимает одинконфигурационный файлПросто сделайте конфигурацию.Чем проще файл конфигурации,тем лучше.Используются xml и json.
период разработки продукта: в настоящее время есть еще места, которые необходимо настроить.Еще несколько пунктов конфигурации еще несколько параметровХотя несколько громоздко, но еще достаточно статических файлов конфигурации
Зрелость продукта: расширение кода расширения персонала, статические файлы конфигурации совершенно недостаточны, для достижения цели динамической конфигурации часто вводятDSLдля управления связанной конфигурацией
~~Поздний продукт: Огонь, чтобы начать все сначала (помните удалено) ~~

После нахлынувших эмоций, имейте в виду приведенный выше опыт руководства, давайте приступим к обсуждению технических деталей.

1.Web Конфигурация передней работы проекта

Фронтенд-инжиниринг всегда был горячей темой во фронт-энде, и хотя он всегда был горячим, конкретная реализация по-прежнему оставляет желать лучшего. Лично я считаю, что основных причин две: первая — фронтенд-конструкция начиналась с нуля, а фундамент относительно слабый, вторая — продвижение сообщества. В качестве примера возьмем текущий основной файл конфигурации внешнего интерфейса:

использоватьpackage.jsonУправление пакетами npm
Используйте сценарий npm для управления процессами и иногда подключайте связанные сценарии кpackage.jsonвнутри
Encoded Specification eslint, иногда даже пишут.eslintrc.js
Используйте Babel, чтобы обработать синтаксическую совместимость, иногда вы хотите написатьbabel.config.js
Сборка проекта и выпуск пакета с помощью веб-пакета
......

Выше перечислены только несколько основных конфигураций, по крайней мере, в вашем проекте их уже 5.конфигурационный файлТеперь во фронтэнде JavaScript все работаетязык сценариевПод клей эти профили также можно, сложность такая, а опыт разработки и вполовину не так хорош, как на iOS и Android.

Если вы думаете, что я просто простой критики передней стороны, которую вы ошиблись, я хочу выразить, состоит в том, что такие сложные конфигурации могут исправить, конфигурация проекта IOS Android не являетсяShoudaoqinlai.?

project.pbxprojа такжеCocoaPods. Поняв эти два знания, стоит обновить RN.

1⃣️ Project.pbxproj с Xcode

project.pbxprojIOS - это проектконфигурационный файл, что-то вроде JSON с точки зрения структуры данных, его возраст можно проследить до NeXT, его читабельность в основном равна 0, а каждое слияние git — это чистый черный кошмар. Если вы мне не верите, взгляните на картинку ниже, это для всеобщего обозрения?

Тот факт, что что-то с такой плохой читабельностью может быть передано, зависит отXCodeЭта IDE оправдывает ожидания. Каждый раз, когда мы изменяем конфигурацию в XCode, напримерBuild Settingsи другие варианты, которые в итоге будут отражены вproject.pbxprojЭтот файл конфигурации также является альтернативным DSL.

project.pbxprojЯ рекомендую следующие соответствующие статьи знаний, после прочтения которых вы получите более глубокое понимание процесса создания пакетов компилятора iOS:

iOS development project.pbxproj в xcode — углубленный анализ: представленproject.pbxproj
: После прочтения конфигурации и иметь XCODEproject.pbxprojБолее глубокое понимание соответствия между файлами
Xcode - цель, отличие ПРОЕКТА: представляет, что означает каждый элемент конфигурации в Xcode.
Процесс сборки XCode

2⃣️ Cocoapods

CocoaPods — это инструмент для управления проектами сторонних библиотек iOS с открытым исходным кодом. Текущие основные проекты iOS управляются сторонними библиотеками CocoaPods.

React Native наконец-то использовал CocoaPods в версии 0.60 в ногу с сообществом iOS. Преимущество этого заключается в том, что нагрузка на последующее обслуживание и итерацию будет намного меньше.Кто знает, как я пережил дни обновления различных iOS SDK в прошлом.

относительноproject.pbxproj, CocoaPods, несомненно, намного проще, написание скриптов конфигурацииRubyЯзык также относительно чистый, а читабельность подфайла намного выше.

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target '项目名称' do
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'

  use_native_modules!
end

Учебные материалы CocoaPods могут относиться к следующему, если недостаточно, вы можете выполнить поиск самостоятельно:

Cocoapods использует учебник

3. Конфигурация проекта Android

Конфигурация проекта Android в основном состоит изgradleУправляемые файлами файлы Gradle контролируютсяGroovyНаписан этот язык сценариев на основе JVM. Идея здесь очевидна, нам нужно только немного понять синтаксис Groovy и написать gradle, мы можем читать и изменять файл конфигурации Android. Здесь я рекомендую несколько связанных туториалов, после прочтения у вас будет общее понимание:

Основы Groovy Scripting Raiders
Основы сценариев Gradle Raiders
Советы и трюки Грейла

Изучив основы грамматики, а затем вернитесь к проекту Android. Конфигурация проекта Android в основном контролируется тремя файлами, более конфликтными при обновлении также являются три файла:

settings.gradle: используется для указания Gradle, какие модули следует включать при сборке приложения.
build.gradle: Определяет конфигурацию сборки, которая применяется ко всем модулям в проекте
app/build.gradle: определяет конфигурацию сборки для приложения.

Лично я думаю, что настроить Android Gradle довольно легко, потому что файл Gradle имеет то преимущество, что вы можете.大家可以花点儿时间把每个配置项都加上注释，这样在升级改动过程中就不容易发怵。

React Native официально выпустил обновление основной версии 0.60 в июле 2019 года.Upgrade HelperЭто Diff гаджет. Благодаря этому инструменту мы можем легко увидеть изменения каждого скрипта конфигурации при обновлении версии, что очень удобно.

2. Процесс обновления

Когда версия RN обновляется, мой процесс обновления обычно выглядит следующим образом:

Беспрепятственная сетевая среда, вы можете свободно получать доступ к видам Google
ПроверитьОфициальный блог, получить основное содержание обновления версии
Читать RN GitHubCHANGELOG, получить конкретные изменения обновления версии и адаптироваться к изменениям API
Прочитайте сторонние зависимостиREADME.mdДокументы, необходимость обновления синхронизации
использоватьUpgrade Helper upgrading-react-native
Удалите node_modules и кеш, пересоберите проект, если сборка не удалась, выполните поиск или спросите нативных разработчиков в соответствии с сообщением об ошибке.
Регрессионное тестирование

Во время процесса обновления я лично рекомендую, чтобы операция git commit была как можно более атомарной, чтобы облегчить последующую проверку и откат.Осторожно, лодка.

В моем фактическом обновлении, поскольку React Native 0.59 до 0.60 сильно изменился, а бизнес усложнился, обновление 0.60 заняло две недели: одна неделя для iOS и одна неделя для Android; обновление 0.61 и 0.62 относительно простое. , вероятно, его можно будет обновить за час-два.

3. Обновление React Native 0.60

3 июля 2019 года Facebook официально выпустил React Native 0.60.Это очень большое обновление версии.Хотя новых функций не было добавлено, на нижнем уровне было выполнено множество оптимизаций для соответствия основной конфигурации:

И другие компоненты для удаления веб-просмотраreact-native-communityОбслуживание сообщества
Используйте CocoaPods для управления сторонними зависимостями iOS и согласования с основной конфигурацией iOS.
Перенесите Android на AndroidX, чтобы упростить последующие обновления и обновления.
Некоторые сторонние пакеты React Native подключаются автоматически, и их больше не нужно использовать вручную.react-native link *охватывать

0.60 нужно набраться терпения при обновлении, за один раз добиться успеха невозможно, рекомендуется обратиться кUpgrade Helperа такжеUpgrade to React Native 0.60В этом посте я дополню то, что не объяснено в тексте.

Перед обновлением убедитесь, что соответствующие сторонние пакеты являются последней версией.

1.React Native

Здесь относительно легко обновить JavaScript, в конце концов, это родина фронтенд-программистов. После обновления номера версии на основе различий Diff также следует отметить следующие моменты:

1⃣️ Некоторые встроенные компоненты РН переданы сообществу на обслуживание

NetInfo,WebViewа такжеGeolocationУдален из реагирования родных, переданныхreact-native-communityОбслуживание сообщества. Итак, нам нужно изменитьimport

Slider,AsyncStorage,CameraRoll,Clipboard

Примечательно,react-native-webviewВ обновлении в ответ на политику App Store UIWebView был удален, и поддерживается только WKWebView. Если вы делали мобильную адаптацию, то должны понимать, что WKWebview не очень дружит с поддержкой куки.Здесь нужно сосредоточиться на регрессионном тестировании, другой момент в том, что если веб-страницы RN и H5 будут пройденыpostMessageТакже есть некоторые несовместимые обновления связанных API, здесь нужно сосредоточиться на адаптации, подробнее см.Документация.

2⃣️ SwipeableFlatList удален

React Native SwipeableFlatList предлагается в версии 0.5X.Компонент списка удаления бокового слайда, хотя он и не был опубликован в официальных документах, но многие люди в сообществе уже используют его. Возможно не устраивает реализация этого компонента, официалы убрали этот компонент в 0.60. Чтобы проект не сообщал об ошибках, нам может потребоваться извлечь исходный код, связанный с SwipeableFlatList, и поддерживать его вручную.Кто-то предложил соответствующий код для поддержки пакета npm——react-native-swipeable-lists, мы можем ввести временное превышение.

2.iOS

Версия 0.60 React Native поддерживает CocoaPods.В 2020 году RN наконец поддерживает CocoaPods.В эпоху отсутствия CocoaPods, чтобы использовать некоторые сторонние библиотеки iOS, мы должны вручную перетаскивать файлы библиотеки в основной проект, который очень неудобно обновлять и обслуживать. Поскольку версия 0.61 CocoaPods является единственным дополнительным решением для управления пакетами, настоятельно рекомендуется обновить ее напрямую.

1⃣️ Переход на CocoaPods и поддержка автоматического связывания

Перед миграцией Cocoapods введите команду Unlink Nounge Modules в CLI:

react-native unlink

После не ударяясь, он будет мигрироваться на какоапод. Перед миграцией убедитесь, что Ruby и Cocoapods были успешно установлены. Специфический процесс установки не является центром этой статьи и не будет расширена. Студенты, которые не установили, что он ищет его сами по себе.

Создаем новый файл в каталоге iosPodfile, введите в него следующий код:

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target '项目名称' do
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target '项目名称Tests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

Вышеприведенный код,podНачало отnode_modulesимпорт каталогаreact-nativeСоответствующий официальный код. Следующие две строки кода реализуют функцию AutoLink:

require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target '项目名称' do
  ...
  use_native_modules!
end

PodfileПосле настроили, запустите его в папке iOSpod install, установите связанные зависимости.

После успешной установки будет создан xcworkspace.В это время вам нужно выйти из текущего проекта xcodeproj и открыть xcworkspace.

В xcworkspace есть первые две папки верхнего уровня, одна — ваш проект xcodeproj, а другая — папка Pods (слева): первая содержит ваш бизнес-код, а вторая управляет установленными файлами сторонних библиотек. В это время необходимо вручную你的项目/Librariesв каталоге*.xcodeprojВручную удалите файл (правая красная коробка ➊), потому что они уже существуют в папке PODS (правая красная коробка ➋).

2 ⃣️ Изменить путь поиска заголовка

Предыдущий шаг модифицировал эталонный метод проекта React Native, но проблема осталась, то есть адресный путь к заголовочному файлу не изменился, мы можем наблюдать следующие две картинки:

Оригинальный путь поиска в заголовке указывает на$(SRCROOT)/../node_modules/*
После использования Cocoapod, путь изменился на$(PODS_CONFIGURATION_BUILD_DIR)/*

В то время это изменение застряло у меня на день, и это изменение было вproject.pbxproj, очень трудно читать и игнорировать. Позже нашел проблему, создав новый проект RN. Решение состоит в том, чтобы удалить исходное содержимое пути поиска заголовков и добавить новый путь вручную.

После выполнения двух вышеуказанных шагов вы можете попытаться собрать проект, и вы, вероятно, обнаружите, что его по-прежнему невозможно собрать. Из-за различных причин ошибки я не могу охватить их все, поэтому удобнее спросить у Google здесь.

3⃣️ Добавлен скрипт Start Packager

На этом этапе предполагается, что вы уже построили проект iOS. В это время вы обнаружите проблему. После того, как предыдущая сборка iOS будет успешной, сервер узла будет автоматически запущен для компиляции файла javascript. После обновления , нод-сервер не будет запускаться автоматически, нам нужно вручнуюnpm run startЗапускать нод-сервер очень неудобно.

В чем проблема?原因是在原来的构建方式里，Libraries 下的React.xcodeprojВ Start Packager есть скрипт, который автоматически запускает сервер узла после успешной сборки проекта:

После миграции на Pods этот скрипт пропал, и нам нужно вручную добавить его в основной проект. Способ добавления тоже очень простой, я его тоже отметил на картинке ниже, нажимаем на папку проекта и в открывшемся окнеTARGETSизBuild PhasesНажмите ➕, затем нажмитеNew Run Script PhaseДобавьте новую область сценария, а затем заполните следующий код:

export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}"
echo "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "${SRCROOT}/../node_modules/react-native/scripts/.packager.env"
if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; then
  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then
    if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; then
      echo "Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly"
      exit 2
    fi
  else
    open "$SRCROOT/../node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically"
  fi
fi

Расположение этого скрипта Start Packager также несколько специфично, лучше всего поместить его вCheck Pods Manifest.lockа такжеCompile SourcesМежду или еще приведет к ошибке при запуске сервера узла.

4⃣️ Добавлен LaunchScreen.storyboard

С увеличением линейки продуктов iPhone увеличился и размер iPhone.Раньше считалось, что один размер соответствует одномуLaunchImageМетод постепенно становится неприменимым, в настоящее время  официально рекомендует использоватьLaunchScreen.storyboardсделать заставку и потребовать, чтобы все приложения перешли на эту схему в 2021 году.

В Интернете есть много руководств по конкретной конфигурации, просто найдите эталонную конфигурацию. Я лично ссылаюсь на следующие учебники:

Как использовать Launch Screen Storyboard при разработке для iOS
Добавьте экран запуска в приложение RN через LaunchScreen.storyboard.
iOS 13 использует LaunchScreen.storyboard для адаптации изображений запуска различных размеров.

5⃣️ Измените скрипт xcodebuild

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

xcodebuild archive -project 项目名称.xcodeproj

⬇️

xcodebuild archive -workspace 项目名称.xcworkspace

О xcodebuild вы можете обратиться к этим двум статьям:

Автоматическая упаковка с помощью команды xcodebuild
Xcodebuild от начального до профессионального

3.Android

Обновление Android 0.60 в основном состоит из 3 пунктов:

Проект React Native обновлен до AndroidX
React Native полагается на стороннюю поддержку autolink
Поддержка Hermes, движка Javascript с открытым исходным кодом для Facebook.

Перед обновлением необходимо обновить версии Gradle и Groovy. Ссылка для конкретных деталейUpgrade Helper.

android.supportandroidxвместо.升级跟着 Android 官方文档走就行，我主要参考了以下文档：

Всегда слышу, как кто-то говорит AndroidX, что такое AndroidX?
Обзор AndroidX
Переход на AndroidX
Миграция с Android на AndroidX

Работа по миграции в основном заключается в измененииimportПуть, нагрузка может быть немного большой, но психологическая нагрузка небольшая, и по сути это смена имени, что не является большой проблемой.

2⃣️ Поддержка автолинковки

Попробуйте запустить функцию автосвязывания перед интеграциейreact-native unlink, и посмотрите, сможете ли вы отменить связь автоматически. Если отмена не удалась, вы должны вручную удалить старый код привязки и добавить новый код автопривязки. Позвольте мне взять стороннюю библиотеку react-native-svg в качестве примера для иллюстрации:

1. Проверитьandroid/settings.gradle, удалить старыйincludeНастройте, добавьте следующий новый код:

rootProject.name = '你的项目'

- include ':react-native-svg'
- project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')

+ apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'

2. Проверитьandroid/app/build.gradleУдалите старую конфигурацию, последняя строка файла добавляет конфигурацию линии:

dependencies {
-   implementation project(':react-native-svg')
}

+ apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

3. ПроверитьMainApplication.java, удалите старую ссылку:

- @Override
- protected List<ReactPackage> getPackages() {
-   return Arrays.<ReactPackage>asList(
-     new MainReactPackage(),
-     new SvgPackage()
-   );

+   @SuppressWarnings("UnnecessaryLocalVariable")
+   List<ReactPackage> packages = new PackageList(this).getPackages();
+   return packages;
- }

Стоит отметить, что наш бизнес, вероятно, будет инкапсулировать некоторые нативные модули самостоятельно.После вышеуказанных модификаций способ импорта нативных модулей также должен быть соответствующим образом изменен.Вы можете обратиться к официальной документации здесь.Android Register the Module:

+ import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.

protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
+   packages.add(new CustomToastPackage()); // <-- Add this line with your package name.
  return packages;
}

3⃣️ Поддержка Гермеса

HermesЭто JavaScript IS Facebook с открытым исходным кодом. По сравнению с текущим ОАО, он оптимизирован в размере пакета и скоростью запуска. В сообществе уже много статей о Гермесе. Я нашел несколько хороших. Если вы заинтересованы в Гермесе, вы можете проверить это.

Исследование Ctrip нового поколения JS-движка Hermes от RN
React Native выпускает JS-движок нового поколения Hermes
Предварительное исследование двигателя Hermes

Соответствующие функции Hermes не являются предметом рассмотрения в этой статье, поэтому я не буду вводить их дальше.

Если Android хочет использовать Hermes, он должен использовать React Native с номером версии выше 0.60.4 и должен быть совместим сandroid/app/build.gradleСделайте некоторые изменения:

project.ext.react = [
-  entryFile: "index.js"
+  entryFile: "index.js",
+  enableHermes: false,  // clean and rebuild if changing
]

- def useIntlJsc = false
+ def jscFlavor = 'org.webkit:android-jsc:+'

dependencies {
-  if (useIntlJsc) {
-    implementation 'org.webkit:android-jsc-intl:+'
-  } else {
-    implementation 'org.webkit:android-jsc:+'
-  }
  
+  if (enableHermes) {
+    def hermesPath = "../../node_modules/hermesvm/android/";
+    debugImplementation files(hermesPath + "hermes-debug.aar")
+    releaseImplementation files(hermesPath + "hermes-release.aar")
+  } else {
+    implementation jscFlavor
+  }
}

Вышеуказанные списки только серьезные изменения, если вы не используете Гермес, не могут полностью изменить; если вы хотите попробовать, в соответствии с наилучшимUpgrade HelperИзмените перечисленные подробные изменения, затем прочитайте веб-сайт React Native.Using HermesНастроить и отладить.

В-четвертых, обновление React Native 0.61.

Основное обновление React Native 0.61 —Fast RefreshВведение этой функции значительно улучшает опыт разработки.

Fast RefreshДобавление имеет два преимущества, первое — поставитьlive reloadingа такжеhot reloadingДве функции были объединены в одну и улучшены, вторая, наконец, поддерживает горячее обновление Hooks. Хотя 0.59.10 уже поддерживает хуки, функциональные компоненты на тот момент не поддерживали горячие обновления, и опыт разработки был слишком плохим. Он готов к использованию после обновления до React Native 0.61.

В целом, обновление 0.61 небольшое, и его можно выполнить за час или два. Рекомендуемая ссылка перед обновлениемUpgrade Helperа такжеUpgrade to React Native 0.61В этом посте я дополню то, что не объяснено в тексте.

1.React Native

JavaScript здесь в основном касается некоторых изменений и обновлений API, просто следуйте сообщению об ошибке, чтобы изменить его, и это не сложно.

1⃣️ Реагистрация обновления до 16,9

Реагировать После обновления до 16.9,componentWillMountКогда API устарел, его необходимо перенести наUNSAFE_componentWillMountи т. д. сUNSAFE_префикс API.

Основной проект в API легче реконструировать и заменить, проблема в том, что некоторые сторонние JS долгое время не имеют пакета обслуживания, на этот раз необходимо вручную разветвить код обслуживания, замены или сторонних пакетов с поддерживаемыми функциями, это принадлежит технический долг, только немного преодолен.

1.ErrorUtilsПривязать к Global по умолчанию, нет необходимостиimport ErrorUtils from ErrorUtilsимпортированный

2.RCTNetworkingСсылочный путь изменяется, нам нужно изменить его как:

const RCTNetworking = require('react-native/Libraries/Network/RCTNetworking');

3.DimensionsМетод импорта также изменился и нуждается в модификации:

import Dimensions from 'Dimensions';

⬇️

import { Dimensions } from 'react-native';

2.iOS

После 0.61 React Native iOS поддерживает только Cocoapods Link.Если 0.60 был обновлен до Cocoapods, то это обновление iOS будет очень быстрым, просто нужно изменить путь импорта некоторых библиотек в Podfile.

Конкретные различия можно увидетьUpgrade Helper, очень просто, после сравнения и модификацииpod installВот и все.

3.Android

Обновление Android до версии 0.61 также относительно простое: обновите версию Gradle, измените ссылочный путь Hermes и следуйте инструкциям.Upgrade HelperDiff может быть изменен в свою очередь.

Пять, обновление React Native 0.62

React Native 0.62 также расширяет возможности разработчиков, которые по умолчанию представлены в проекте RN.FlipperЭтот мобильный инструмент отладки, созданный Facebook, поддерживаетReact DevTools v4, сообщение об ошибке может выбрать новыйLogBoxЭто более удобно, чем исходная подсказка об ошибке, для обнаружения проблем.

В дополнение к улучшению опыта разработки, это обновление также поддерживает режим Dark Mode, После RN вы можете выполнить адаптацию темного режима.

В целом, обновление 0.62 также небольшое, и обновление можно выполнить за час или два. Рекомендуемая ссылка перед обновлениемUpgrade Helperа такжеUpgrade to React Native 0.62В этом посте я дополню то, что не объяснено в тексте.

1.React Native

1⃣️ явно указано useNativeDriver

Реагируйте родные перед использованиемAnimateduseNativeDriveruseNativeDriverценность . Я думаю, смысл этого обновления в том, что каждый раз, когда вы используетеAnimatedКогда, заставляя разработчиков подумать о том, может ли анимация работать на родной нити, чтобы оптимизировать опыт анимации.

2⃣️ Logbox Open

LogBoxЭта функция по умолчанию отключена в версии 0.62 и включена по умолчанию в версии 0.63. Чтобы сравнить Взлом с методом открытия в 0.62, вам необходимо выполнить следующие шаги:

1. Создайте новый корневой каталог проекта.before.js, а затем написать в нем всего одну строчку кода:

require('react-native').unstable_enableLogBox();

2. Входной файл всех файлов в JSindex.jsИмпортируйте этот файл в первую строку:

import './before';

две ступени вышедолжны строго соблюдаться, иначе будет ошибка красного экрана.

2.iOS

1⃣️ Обновление CocoaPods

Cocoapods также имеет некоторые изменения в этой версии, за исключением стручков, связанных с Flipper, изменения очень небольшие, по словамUpgrade HelperДиф разница в модификации просто отличная.

2⃣️ Быстрая поддержка

0,62 Обновление должно изменять некоторые конфигурации, связанные с SWIFT, определенный процесс обновления виденReact Native 0.62 upgrade (Xcode)

3.Android

Обновление Android 0.61 также относительно простое.Версия Gradle обновлена, за исключением обновлений, связанных с Flipper, изменения очень небольшие, следуйтеUpgrade HelperDiff может быть изменен в свою очередь.

4.Flipper

После 0,62,FlipperОн добавляется по умолчанию в проект RN, и вы можете легко просматривать такую информацию, как макет, сеть и журнал.

При модернизации старых проектов,FlipperФактически, это необязательно. Есть несколько поворотов и поворотов в установке. После начала чувства выглядит следующим образом (версия 0.52.1):

Поместите React Native’sconsole.logИнформация и родная информация журнала находятся в одном приложении, что более удобно для просмотра
Вы можете просмотреть макет Native Layout, и он имеет встроенныйReact DevTools v4, сравнение двух может облегчить просмотр макета
Сеть может легко просматривать сетевую информацию, которая всегда была болевой точкой в отладке RN отладки
Он может быстро делать снимки экрана и записывать экран, что полезно для связи с UED.
Поддержка пользовательских плагинов

Вышеперечисленное все плюсы, но минусов еще много.Расскажу о недостатках, которые я чувствую после их использования:

сеть не очень хорошо поддерживает UTF-8.FlipperКодировка не обрабатывается должным образом, что приводит к искажению символов на китайском языке, я уже упоминал об этом официальномуissues, но игнорировал меня
Также существует проблема с синтаксическим анализом сетевого изображения, которое анализируется как искаженный текст.
Данные журнала журнала - все строки, даже если вы регистрируете объект, он только отображаетJSON.stringifyданные после

Вышеизложенное мой опыт, использовать его в проекте или нет, думаю вам лучше испытать его на себе.

Если вы хотите интегрироваться в проектFlipper,согласно сUpgrade HelperХорошо интегрировать, это не очень сложно.

постскриптум

Это все, что касается обновления версии React Native Guide, это обновление будет продолжать обновлять учебник, чтобы получить лучший опыт, который вы можете просмотреть.Оригинальный пост в блоге.

Если вы считаете, что статья полезна для вас, вы должны помнитьподобноО 🌟, спасибо, это действительно много значит для меня!

Еще отличные рекомендации по статьям:

РЕАГИМАЯ НАРОДНОГО РУКОВОДСТВА РИСКАНИЯАнализ оптимизации производительности Rn шесть очков от точки зрения оказания слоя, а также реализация принципа, объясненного в графической форме складки
Введение5 самых запутанных знаний в webpack, у Наггетс почти 800 лайков, в этой статье ясно объясняется, что в WebpackПохоже на другое чувство концепции
Подробное введениечто такое webpack dll, и дает 2 лучших практики,Избавьтесь от громоздкой конфигурации dll