React native Upgrade Guide |v0.40+ upgrade adaptation experience and insights

Respect for copyright, not reproduced without authorization
This article originates from: http://blog.csdn.net/fengyuzhengfan/article/details/54585899

React native, an open source project with thousands of developers, has been released 147 times since the release of the first edition of March 27, 2015, with a new release on average almost weekly. With iterations of the iteration, the React native also gradually stabilized, and the release frequency was maintained at every one or both weeks. The new version of the iterative iteration for react native developers, the timely upgrade of the react native version allows the project to use more APIs, new features, and eliminate some of the old API, not only become a compulsory course is also a small challenge.

Upgrading a react native project requires not only the JS part but also the Android project and iOS project, although react native the official effort to reduce the complexity of the upgrade, but if the two react native version of the larger span of the upgrade will still require a lot of work. In this article I will share with you the process guidance for react native upgrade and some of my experience in upgrading the react native process.

React Native upgrade process

The React native upgrade process can be divided into three major strides:

1. Installation react-native-git-upgrade module;
2. Execute the UPDATE command;
3. Conflict resolution;

Note: The above steps are all dependent on git, there is no git client to install a small partner, need to install.

1. Installation react-native-git-upgradeModule

First we need to install react-native-git-upgrade the module, open the terminal to execute the following name:

-g react-native-git-upgrade

After the installation is successful, you will see the output:

Experience: React-native-git-upgrade is a command-line interface tool, we need to install it to the global, so we npm install need to add this parameter when the command is installed -g .

2. Execute the UPDATE command

After installing the React-native-git-upgrade tool, we can update the react native version of our project by running the following command to complete the update:

$ react-native-git-upgrade

With this command you can update the react native to the latest version, but not the pre-release version.

Note: We need to execute the update command in the root directory of the React native project, which is the directory where the Package.json resides.

If you want to update to the specified version of react native you need to add the specified version of the above command after the parameters, as follows:

$ react-native-git-upgrade X.Y.Z

In this way, React native will be updated to the x.y.z version, and the x.y.z will need to be replaced with a specific version when running this command.

After the update command executes successfully, you will see the following output from the terminal:

From the output of the terminal we can see that the whole process of updating and the react native version we have updated to.

In addition, we can see the files that changed after this update by using version control:

3. Conflict resolution

It is particularly mentioned that the React-native-git-upgrade tool will perform a merge operation when updating the react native version, i.e. merging our local react native version with the latest or specified react native version. There may be some conflicts during the merge process, and we can clearly see the conflicting files in the output of the terminal:

We can see that there is a conflict between APPDELEGATE.M and project.pbxproj, so next we need to deal with the conflicting files.

Experience: In general, the greater the React native version span, the greater the likelihood of conflict.

When dealing with conflicts, we usually keep the latest code to remove the old code, but we have to look at the specific function of the code and do the processing, for example, in which we need to remove #import "RCTBundleURLProvider.h" and #import "RCTRootView.h" retain, #import <React/RCTBundleURLProvider.h> #import <React/RCTRootView.h> and why we #import "SplashScreen.h" want to keep it, #import "SplashScreen.h" because, #import "SplashScreen.h"we added, not part of the react native.

Note: Another special mention is the conflict file created under the Xxx.xcodeproj folder, for example project.pbxproj , Xxx.xcodeproj folder is stored in the entire iOS project some configuration files, in dealing with these file conflicts, we need to pay special attention to the format of the file, improper handling is likely to cause the whole iOS project will not open.

If an error occurs when you open an iOS project after the conflict has been processed the project file cannot be parsed :

It is most likely that the structure of the file is corrupted when dealing with conflicts under the Xxx.xcodeproj folder, causing Xcode to be unable to parse the file, and to solve the problem, it is necessary to find the file structure of the corrupted file to be repaired.

By the end of the entire update process, we can now use and experience the latest version of the API and features of react native.

Note: Although we have completed the entire update process for the react native, we need to run our react native project at this time and see if the features are normal, as it is likely that some of the older APIs we used in the project are in the new version of the react Native has been removed, so we need to update the removed or deprecated APIs in a timely manner. About the specific changes that have occurred in each version we can refer to: React Native Project Release Notes
。

React Native v0.40+ Upgrade adaptation experience and experiences

At the beginning of January 2017, React native released the v0.40 version and was named December 2016, which is the last version of the 2016 year. As always, every time react native the full version of the release will bring some big changes, this time is no exception. In this article, I'll share some of the react Native v0.40 's significant changes to the developer and some of the experience gained from upgrading to v0.40.

For information on how to upgrade the React native project, refer to the [React native upgrade process] (#React native upgrade process).

Yesterday I made a React native v0.40 adaptation to React-native-splash-screen, and follow the steps of the [React native upgrade process] (#React native upgrade process) examples The React The native version has been upgraded from v0.32 to v0.40. Here I will combine this upgrade to explain some of the changes react Native v0.40 brings.

Experience: The process of escalation is painful, but painful and joyful.

Some of the major changes brought about by React Native v0.40

Updated documentation from react native we can see some significant changes with each version upgrade, as well as in the v0.40 version.

IOS native part of the header file is moved

In the v0.40 version, one of the most influential changes was this, and the IOS native part of the header file was moved to react. This change directly causes all native modules and code that has a reference react Native. h file to fail to run on v0.40.

To import a react Native. h file before v0.40 The format is this:

#import "RCTUtils.h"

Importing a react Native. h file into the v0.40 version will look like this:

#import <React/RCTUtils.h>

To resolve we need to change all the code referenced to the react Native. h file to the v0.40 notation.

Refer to: APPDELEGATE.M

Experience: Not only that, this change directly results in all third-party libraries using react Native. h are not compatible until these changes are made v0.40

Require (' Image!... ') refers to pictures in a way that is not supported

Require (' Image!... ') has been enabled for a long time and has been removed directly from the v0.40 version, which means that we can no longer use images in this way. More ways to use images can be found in the official documentation: images use

Experience: Whether you are doing react native development or doing other development, some APIs labeled deprecated are replaced in a timely fashion, as these deprecated APIs are likely to be removed from the SDK in the near future.

At last

since come, leave a like to go again, encourage me to continue to create (^_^) ∠※

If you like my article, then on the csdn to follow my blog @ Fengyuzhengfan Bar, let us be friends ~ ~

Poke here, add attention to OH:

Weibo: First time get push
Personal Blog: Dry articles are all here Oh
GitHub: My open Source project

React native Upgrade Guide |v0.40+ upgrade adaptation experience and experiences