[exclusive] react native version upgrade Guide

Time:2021-10-13

preface

As a cross end framework, react native has one of the most troublesome problems, which isVersion update。 In particular, in case of large version updates, the configuration build files of JavaScript, IOS and Android have changed greatly. Sometimes the configuration files of the three are coupled with each other, often affecting the whole body.

This article assumes that the leader of react native upgrade isfront endStudents are familiar with a set of front-end construction process based on JavaScript. If possible, it is strongly recommended to pull IOS and Android development when upgrading. For some trivial upgrade details,Face to face communication is far more efficient than search engines

Tip: because each modification and addition will hide the article for re review, it is recommended to read the original blog for the best reading experience

👉 Read the original blog

If you think the article is useful to you, you must remembergive the thumbs-upOh, thank you. It’s really important to me!


1、 Sharpen the knife without mistaking the woodcutter

I think this part of knowledge is the most important, after allVersion update is eternal, but the operation process is unchanged

Before introducing the end-to-end construction tools in detail, let’s put aside various technical details and start from the whole project life cycle to see how most products do technical planning:

  • Early productThe architecture is relatively simple, and the whole project takes:configuration fileJust do the configuration. The simpler the configuration file, the better. XML and JSON will be used
  • Product development period: there are more places to configure at this timeAdd more configuration items and more parameters, although a little cumbersome, the static configuration file is still enough
  • Product maturity: the personnel amplification code is inflated, and the static configuration file is completely insufficient. In order to achieve the purpose of dynamic configuration, a software is often introducedscripting language Or create your own setDSLTo manage related configurations
  • Late product: burn a fire and start a new stove (remember to delete)

After sorting out the life cycle of a technical product, you will have an overall understanding of the configuration files in daily development: those smelly and long configuration items, messy compatible writing, no aesthetic DSL. The most amazing thing is that these patchwork things can also run the project, At the moment when build succeeds, you will express your sincere admiration for this human miracle——It’s called a major

Take back the surging emotion and keep in mind the above guidance experience. Let’s start to discuss the technical details.


1. [web front end] project configuration

Front end engineering has always been a hot spot in the front end. Although it has been very hot, the specific implementation is still a mess. Personally, there are two main reasons. One is that the front-end construction is from scratch, and the foundation is relatively weak; One is community promotion. While a hundred flowers bloom, there is no unified standard. Take the main front-end configuration files:

  • usepackage.jsonManage NPM packages
  • NPM script is used to realize process management, and sometimes relevant scripts are stuffed intopackage.jsonin
  • Use eslint for coding specification, and sometimes write a.eslintrc.js
  • Handle syntax compatibility with Babel, and sometimes write ababel.config.js
  • Project construction and packaging release with webpack
  • ……

Only a few mainstream configurations are listed above. If nothing unexpected happens, there are already 5 in your projectconfiguration fileIt’s all powerful in JavaScriptscripting language These profiles can also beMutual reference and coupling, the complexity is like this, and the development experience is not half as good as IOS and Android.

If you think I’m just criticizing the front-end, you’re wrong. What I want to express is that such a complex configuration can be done, but the project configuration of IOS and Android is notcapture an enemy easily


2. [IOS] project configuration

IOS projects mainly have two points:project.pbxprojandCocoaPods。 After understanding the knowledge of these two groups, it is not empty to upgrade RN.

one ⃣ Project.pbxproj and Xcode

project.pbxprojIt’s an IOS projectconfiguration file, some of the data structure features are like JSON. The age can be traced back to next. The readability is basically 0. Every git merge is a pure black nightmare. If you don’t believe it, look at the picture below. Is this for people to see.

project.pbxproj 代码
Project.pbxproj code

Such a poor readability can be passed down, in fact, it all depends onXCodeThis ide gives it life. Every time we modify the configuration in Xcode, for exampleBuild SettingsAnd other options will be reflected in the endproject.pbxprojThis configuration file is also an alternative DSL.

project.pbxprojFor relevant knowledge, I recommend the following articles. After reading them, you will have a deeper understanding of IOS compilation and packaging process:

2⃣️ CocoaPods

Cocoapods is a tool responsible for managing third-party open source libraries in IOS projects. At present, mainstream IOS projects use cocoapods to manage third-party libraries.

React native finally used cocoapods in 0.60, in step with the IOS community. The advantage of this is that the pressure of subsequent maintenance and iteration will be much less. Who knows how I survived the days of upgrading various IOS SDKs in the past.

relativeproject.pbxproj, cocoapods is undoubtedly a lot easier. It’s easier to write configuration scriptsRubyThe language is also relatively fresh, and podfile is much more readable.

platform  : ios,  ' 9.0'require_ relative  '../ node_ modules/@react-native-community/cli-platform-ios/native_ modules'target  ' 'item name'   do    pod  ' React',  : path  => '../ node_ modules/react-native/'    pod  ' React-Core',  : path  => '../ node_ modules/react-native/React'    use_ native_ modules! end

The learning materials of cocoapods can be referred to below. If not enough, you can search by yourself:

Cocoapods tutorial


3. [Android] project configuration

Android project configuration is mainly composed ofgradleFile control, and gradle file is controlled byGroovyThis is written in the scripting language of the JVM system. The idea here is obvious. As long as we understand some groovy syntax and the writing method of gradle, we can read and modify the Android configuration file. Here I recommend some related tutorials. After reading them, you will have a general understanding:

After learning the basic grammar, return to the Android project. The project configuration of Android is mainly controlled by three files, which are also in conflict during upgrade:

  • settings.gradle: used to indicate which modules gradle should include when building applications
  • build.gradle: define the build configuration that applies to all modules in the project
  • app/build.gradle: define the build configuration of the app

Personally, I think the gradle configuration of Android is relatively easy to get started, because the gradle file has an advantage that you canAdd comments at will。 You can take some time to annotate each configuration item, so that it is not easy to be afraid in the process of upgrading and changing.


4. RN official upgrade assistant

React native officially launched the 0.60 version update in July 2019Upgrade HelperThis diff gadget. Through this tool, we can easily see the changes of various configuration scripts during version update, which is very convenient.

React Native Upgrade Helper
React Native Upgrade Helper


2、 Upgrade process

During RN version upgrade, my upgrade process is generally as follows:

  • Unobstructed network environment, free access to Google
  • seeOfficial blog, get the main content of version update
  • Read on Rn GitHubCHANGELOG, get the specific changes of version update and adapt to API changes
  • Read about third-party dependenciesREADME.mdFile, do you need to upgrade synchronously
  • useUpgrade HelperMake version diff and readupgrading-react-nativeModify the project configuration file and configuration script
  • Delete node_ Modules and cache, rebuild the project. If build fails, search or and ask native development students according to the error information
  • regression testing

During the update process, I personally suggest that git commit should be atomised as much as possible to facilitate subsequent disk recovery and rollback,Be careful to sail for ten thousand years

In my actual upgrade, because react native 0.59 to 0.60 changed greatly and the business was complex, it took me two weeks to upgrade 0.60: one week for IOS and one week for Android; The upgrade of 0.61 and 0.62 is relatively simple. It can be upgraded in about an hour or two.


3、 React native 0.60 upgrade

On July 3, 2019, Facebook officially released react native 0.60, which is a very large version update. Although no new functions have been added, many optimizations have been made at the bottom to keep up with the mainstream configuration:

  • Remove WebView and other components and give them toreact-native-communityCommunity maintenance
  • Use cocoapods to manage the third-party dependency of IOS and align with the mainstream IOS configuration
  • Android is migrated to Android x to facilitate subsequent upgrades and updates
  • Some third-party packages of react native will be automatically linked and no longer need to be used manuallyreact-native link *Yes

Be patient when upgrading 0.60. It is impossible to succeed at one time. It is recommended to refer toUpgrade HelperandUpgrade to React Native 0.60In this blog post, I will supplement what is not explained in the article.

Before upgrading, ensure that the relevant third-party package is the latest version.


1.React Native

JavaScript is relatively easy to upgrade here. After all, it is the home of front-end programmers. After upgrading the version number according to diff differences, you should also pay attention to the following points:

1⃣ Part of RN built-in components are handed over to the community for maintenance

NetInfoWebViewandGeolocationRemove from react native and give it toreact-native-communityCommunity maintenance. So we need to modify itimportThe path of the.

SliderAsyncStorageCameraRollClipboardOther components also have removal plans. This upgrade can also be migrated by the way.

It is worth noting that,react-native-webviewIn an update, in response to the app store policy, uiwebview has been removed and only wkwebview is supported. If you have done mobile adaptation, you must understand that wkwebview is not very friendly to cookie support. Here you need to focus on regression testing; Another point is that if RN and H5 web pages are throughpostMessageThere are also some incompatible updates to related APIs. Here we need to focus on adaptation. See the specific detailsfile

two ⃣ , swipeableflatlist removal

Swipeableflatlist is provided by react native in a version of 0.5xSideslip delete list component, although it has not been released in the official documents, many people in the community are using it. Maybe I’m not satisfied with the implementation of this component. The official deleted this component in 0.60. In order to prevent the project from reporting errors, we may need to take out the source code related to swipeableflatlist and maintain it manually. Someone proposed the relevant code to maintain an NPM package——react-native-swipeable-lists, you can introduce temporary transition.


2.iOS

The 0.60 version of react native supports cocoapods. In 2020, RN finally supports cocoapods. In the era without cocoapods, in order to use some IOS third-party libraries, we must manually drag the library files to the main project, which is very inconvenient for upgrading and maintenance. Since 0.61 cocoapods is the only optional package management scheme, it is strongly recommended to upgrade directly.

one ⃣ Migrate to cocoapods & autolinking support

Before migrating cocoapods, enter the following command unlink native modules in the CLI:

react-native unlink

After unlink, you will migrate to cocoapods. Before migration, ensure that Ruby and cocoapods have been successfully installed. The specific installation process is not the focus of this article. Students who have not installed them will search Google by themselves.

Let’s create a new file in the IOS directoryPodfile, enter the following code:

platform  : ios,  ' 9.0'require_ relative  '../ node_ modules/@react-native-community/cli-platform-ios/native_ modules'target  ' 'item name'   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  ' Project name tests'   do      inherit!  : search_ paths     #  Pods   for   testing    end    use_ native_ modules! end

The above code,podThe beginning is fromnode_modulesDirectory importreact-nativeRelevant official code. The following two lines of code implement the function of AutoLink:

require_ relative  '../ node_ modules/@react-native-community/cli-platform-ios/native_ modules'target  ' 'item name'   do   ...   use_ native_ modules! end

PodfileAfter configuration, run it under IOS folderpod install, install related dependencies.

After successful installation, an xcworkspace space will be generated. At this time, you need to exit the current xcodeproj project and open xcworkspace.

In xcworkspace, there are first two top-level folders, one is your xcodeproj project, and the other is the pods folder (left): the former contains your business code, and the latter manages the third-party library files installed by the manager. At this time, you need to manuallyYour project / librariesUnder directory*.xcodeprojThe files are deleted manually (red box ➊ in the right figure) because they already exist in the pods folder (red box ➋ in the right figure).

iOS目录变化
IOS directory changes

two ⃣ Modify header search path

In the previous step, the reference method of react native project was modified, but another problem is that the addressed header file path has not been modified. We can observe the following two figures:

  • The original header search path points to$(SRCROOT)/../node_modules/*

  • After using cocoapods, the path changes to$(PODS_CONFIGURATION_BUILD_DIR)/*

At that time, this change stuck me all day, and this change wasproject.pbxprojIt is very difficult to read and ignored. Later, problems were found by creating a new RN project. The solution is to delete the original header search path content and manually add the new path.

迁移前
Before migration
迁移后
After migration

After the above two steps are completed, you can try to build the project, and you will probably find that it still can’t build. Because there are many wrong reasons, I can’t cover them one by one. It’s more convenient to ask Google here.

three ⃣ Add a new start packager script

At this step, suppose you have built the IOS project. At this time, you will find a problem. After the IOS build is successful, a node server will be started automatically to compile JavaScript files. After the update, the node server will not be started automatically. We need to manuallynpm run startIt is very inconvenient to start the node server.

What’s the problem? The reason is that in the original construction method, librariesReact.xcodeprojThere is a start packager script, which will automatically start a node server after the project is built successfully:

原 StartPackager 位置
Original startpackager location

After migrating to pods, this script will not exist. We need to add it manually in the main project. The addition method is also very simple. I also marked it in the figure below. Click the project folder and clickTARGETSofBuild PhasesClick inside ➕, Click againNew Run Script PhaseAdd a new script area and fill in the following code:

新建 StartPackager
New startpackager
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"  fifi

The location of the start packager script is also a little particular, and it is best to put it inCheck Pods Manifest.lockandCompile SourcesOtherwise, an error will be reported when starting the node server.

four ⃣ Add launchscreen.storyboard

With the increase of iPhone product line, the size of iPhone has also increased. One size is matched with anotherLaunchImageAt this time, the official suggested to use itLaunchScreen.storyboardTo make the startup screen, and it is required that all apps should be changed to this scheme in 2021.

There are many tutorials on the specific configuration online. Just search the reference configuration. I personally refer to the following tutorials:

5⃣ Modify xcodebuild script

If the project has been configured with automatic packaging script before, because the upgrade is migrated to workspace, some modifications must be made to the original packaging script:

xcodebuild   archive  - project   Project name.xcodeproj

⬇️

xcodebuild   archive  - workspace   Project name.xcworkspace

For xcodebuild, please refer to these two articles:


3.Android

The Android update of 0.60 mainly includes three points:

  • Upgrade the react native project to androidx
  • React native third party dependency supports AutoLink
  • Hermes, an open source JavaScript engine for Facebook, is supported

You need to upgrade gradle and groovy before upgrading. Refer to for detailsUpgrade Helper

one ⃣ Upgrade to androidx

The main reason for the promotion of Android x is that Google officials are fed up with the current chaotic development of Androidandroid.support, with a unifiedandroidxInstead. Just follow the official Android documentation for upgrading. I mainly refer to the following documents:

Migration mainly involves modificationimportPath, the workload may be a little heavy, but the psychological burden is small. In essence, it is a change of name, which is not a big problem.

two ⃣ Autolinking support

Try to run the autolinking function before integrationreact-native unlink, see if you can automatically unlink. If the cancellation fails, manually delete the old link code and add a new autolinking code. Let me take react native SVG as an example:

1. Inspectionandroid/settings.gradle, delete oldincludeConfiguration, add the following new code:

rootProject.name  = ' 'your item'-   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. Inspectionandroid/app/build.gradle, delete the old configuration and add a line of configuration to the last line of the file:

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

3. InspectionMainApplication.java, delete old References:

- @Override- protected List getPackages() {-   return Arrays.asList(-     new MainReactPackage(),-     new SvgPackage()-   );+   @SuppressWarnings("UnnecessaryLocalVariable")+   List packages = new PackageList(this).getPackages();+   return packages;- }

It is worth noting that some native modules are likely to be encapsulated in our business. After the above modifications, the method of importing native modules should also be modified accordingly. Please refer to the official documents hereAndroid Register the Module

+ import com.your-app-name.CustomToastPackage; // protected List getPackages() {  @SuppressWarnings("UnnecessaryLocalVariable")  List packages = new PackageList(this).getPackages();+   packages.add(new CustomToastPackage()); //   return packages;}

three ⃣ Hermes support

Hermes
Hermes

HermesIt is an open-source JavaScript engine for Facebook. Compared with the current JSC, it is optimized in package size and startup speed. There are already many articles about Hermes in the community. I found some good ones. If you are interested in Hermes, you can check them step by step.

The related features of Hermes are not the focus of this article, so I won’t introduce them more.

If Android wants to use Hermes, it must use react native with a version number greater than 0.60.4, andandroid/app/build.gradleMake some changes:

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+  }}

Only major changes are listed above. If you don’t want to use Hermes, you can make no changes at all; If you want to try, you’d better according toUpgrade HelperModify the detailed changes listed, and then read the on the official website of react nativeUsing HermesConfigure and debug.


4、 React native 0.61 upgrade

The main update of react native 0.61 isFast RefreshWith the introduction of, this function greatly improves the development experience.

Fast RefreshThere are two advantages to joining. The first is tolive reloadingandhot reloadingThe two functions are integrated and strengthened; The second one finally supports hooks hot update. Although hooks was supported in 0.59.10, the functional components at that time did not support hot update, and the development experience was too poor. You can use it after upgrading to react native 0.61.

Overall, the update of 0.61 is very small, and the upgrade can be completed in an hour or two. Recommended reference before upgradingUpgrade HelperandUpgrade to React Native 0.61In this blog post, I will supplement what is not explained in the article.

1.React Native

JavaScript here is mainly about API changes and upgrades. Just modify the error message. It’s not difficult.

one ⃣ Upgrade react to 16.9

After upgrading react to 16.9,componentWillMountWhen the API is discarded, it must be migrated toUNSAFE_componentWillMountEqual bandUNSAFE_Prefix API.

These APIs in the main project are easy to reconstruct and replace. The trouble is that some third-party JS packages that have not been maintained for a long time. At this time, you need to manually fork a code maintenance, or replace the third-party package under maintenance with the same function. This belongs to technical debt and can only be overcome bit by bit.

two ⃣ Reference path change

After the update, the reference paths of some methods and components have changed. We need to adapt the following:

1.ErrorUtilsIt is bound to global by default and does not need to beimport ErrorUtils from ErrorUtilsImported

2.RCTNetworkingThe reference path has changed and needs to be modified to:

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

3.DimensionsThe import method has also changed and needs to be modified:

import Dimensions from 'Dimensions';

⬇️

import { Dimensions } from 'react-native';

2.iOS

After 0.61, the react native IOS side only supports cocoapods link. If 0.60 has been upgraded to cocoapods, the IOS upgrade will be very fast. You only need to change the import path of some libraries in podfile.

Specific differences can be seenUpgrade Helper, very simple. Compare and modify againpod installThat’s it.

3.Android

The Android upgrade of 0.61 is also relatively simple. The gradle version is upgraded, and the reference path of Hermes is modified. FollowUpgrade HelperYou can modify the diff in turn.


5、 React native 0.62 upgrade

React native 0.62 also enhances the developer experience, and RN project introduces it by defaultFlipperThis mobile debugging tool made by Facebook supportsReact DevTools v4, the error prompt allows you to select a new oneLogBox, which is more friendly than the original error prompt, making it easier to locate the problem.

In addition to the enhancement of the development experience, this update also supports the dark mode mode. After RN, you can adapt the dark mode.

Overall, the update of 0.62 is also very small, and the upgrade can be completed in an hour or two. Recommended reference before upgradingUpgrade HelperandUpgrade to React Native 0.62In this blog post, I will supplement what is not explained in the article.

1.React Native

one ⃣ Usenativedriver explicitly specifies

Used before react nativeAnimatedAPI,useNativeDriverThe default value is false, which means that JS threads draw animation by default. Explicit specification is required after version upgradeuseNativeDriverValue of. I think the significance of this update is every useAnimatedWhen, force developers to think about whether they can let the animation run in the native thread to optimize the animation experience.

two ⃣ Logbox on

LogBoxThis function is turned off by default in 0.62 and turned on by default in 0.63. The opening mode in 0.62 is compared with hack, and the following steps shall be followed:

1. Create a new item in the project root directorybefore.js, and then write only one line of code:

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

2. Enter all files in JSindex.jsImport this file in the first line of:

import './before';

The above two stepsIt must be strictly implementedOtherwise, an error will be reported on the red screen.

2.iOS

1⃣ , cocoapods update

There are also some changes in cocoapods in this version. Except for the pod related to flipper, the changes are very small. According toUpgrade HelperJust modify the diff difference in.

2⃣ • swift support

Some swift related configurations need to be modified for 0.62 upgrade. See the specific upgrade processReact Native 0.62 upgrade (Xcode)

3.Android

The Android upgrade of 0.61 is also relatively simple. The gradle version is upgraded. Except for the updates related to flipper, the changes are very small. FollowUpgrade HelperYou can modify the diff in turn.

4.Flipper

Flipper
Flipper

After 0.62,FlipperIt is added by default in RN projects, so you can easily view layout, network, log and other information.

When upgrading an old project,FlipperIn fact, it is optional. There are some twists and turns in the installation. I have experienced it. The feeling is as follows (version 0.52.1):

  • Put react nativeconsole.logInformation and native log information are more convenient to view in one application
  • You can view the native layout layout with built-inReact DevTools v4, it is convenient to view the layout by comparing the two
  • Network can easily view network information, which has always been a pain point in RN debugging
  • It can quickly take screenshots to facilitate communication with ued
  • Support custom plug-ins

The above are all advantages, but there are still many disadvantages. Let me talk about the shortcomings I feel after using it:

  • Network does not support UTF-8 very well.FlipperThe code was not handled properly, which led to the display of garbled code in Chinese. I have already mentioned it to the officialissues, but he never paid attention to me
  • There is also a problem with network image parsing, which is parsed into garbled text
  • The data of the log module is a string. Even if you log an object, it is only displayedJSON.stringifyData after

The above is my experience. I think it’s better for you to experience it in person.

If you want to integrate in a projectFlipper, according toUpgrade HelperIntegration is good, but it is not very difficult.


Postscript

The above is the content of the react native version upgrade guide. This upgrade tutorial will be updated continuously. You can view it for the best experienceBlog original

If you think the article is useful to you, you must remembergive the thumbs-upOh, thank you. It’s really important to me!


More excellent articles recommended:


微信公众号:卤蛋实验室
WeChat official account: marinated egg Lab

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]