As we all know, the project upgrade of ReactNative is a difficult problem, I believe that experienced version upgrade of the old players, the heart of sour (KU) sweet (BI) bitter (HA) hot (HA) feeling. Because ReactNative project upgrade design to Android project, IOS project and Javascript project three aspects of the modification, it is still very troublesome to deal with, often solve one error and then a new error, red error box seems to always remind the difficulties of the upgrade. The Facebook team also offers two ways to help developers upgrade to ReactNative:

  • Use the React Native CLI update command to automatically upgrade
  • Use the Upgrade Helper to help websites assist developers in manually upgrading projects

Use the React Native CLI

1. Run the update command to upgrade

React-native upgrade Upgrade the latest stable version or react-native upgrade 0.61.00-Rc. 0 // Run the react-native upgrade command to upgrade the react-native upgrade to the specified versionCopy the code

2. Handle conflicting files. Conflicts may occur in Android or iOS project files after the upgrade.

Upgrade Helper

1. After opening the Upgrade Helper website, the following page is displayed:

Show me how to update

rn-diff-purge, react-diff-view and create-react-app.

conclusion

Although there are many problems in the upgrade of ReactNative project, the version upgrade can be successfully completed by referring to the upgrade guidance provided by the official.

Problems may arise

Last week, I tried to upgrade one of my ReactNative Demo projects. After the upgrade, I could not debug and reported an error: Unable to resolve module ‘./debugger-ui/ debuggerworker.js’ from

watchman watch-del-all
react-native start --reset-cache
Copy the code

other

Caches may cause problems during the upgrade process, and we have compiled some useful commands to handle them:

  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && yarn install`.
  3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`. 
  4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.
Copy the code

If you have any problems in the upgrade, please leave a message in the comments section or on my official account and discuss it together.

Think the article is good, give me a thumbs up, pay attention to bai! Technical exchanges can follow the wechat public number [Jun Wei said], add my friends to discuss wechat communication group: Add friends (remarks on technical exchanges) invite you to join the group, study together and make progress