Shulou(Shulou.com)06/02 Report--

This article focuses on "how to build a React Native development environment", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to build a React Native development environment.

Indexes

Install package management tools

I use the Mac environment, so take Mac as an example, for Windows, there is not much difference.

Install Homebrew

Homebrew is an integrated package management tool tailored for Mac OS. We use it to easily install Node.js and switch Node.js versions.

/ usr/bin/ruby-e "$(curl-fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Note: an unwritable permission problem in the / usr/local directory may occur when installing software using Homebrew in Max OS X version 10.x, which can be fixed by using the following command:

Sudo chown-R `whoami` / usr/local

Install Node.js

Next, use Homebrew to install Node.js,Windows environment. You can download and install Node.js directly from the official website:

Brew install node

If the installation and download speed is too slow, you can set up the image provided by Taobao in China:

Npm config set registry https://registry.npm.taobao.org-global npm config set disturl https://npm.taobao.org/dist-global

Installation package management

We are free to choose to use NPM directly or install the Yarn package management tool separately. I believe everyone is familiar with the use of NPM. Here we take Yarn as an example:

Yarn is a tool provided by Facebook as an alternative to npm and can speed up the download of node modules.

You still need to install the Yarn package using NPM:

Npm install-g yarn

Then we can use yarn add instead of npm install-- save.

Install react-native-cli scaffolding

React Native officially provides scaffolding to generate the initial structure of the project with one click, which can be installed and used directly by beginners or experiencers:

Npm install-g react-native-cli

Install Settings Editor

Mac We use Xcode to develop iOS APP, Android developers can use Eclipse, etc., and we need to simply configure the Xcode editor to support react native:

Click to open the Menu- "Preferences-" Locations of the Xcode editor, and configure the command line tool items in the red box below:

Initialize the project and resolve the running exception

Next, you can initialize a sample program using scaffolding:

/ / initialize a hello project react-native init hello cd hello

After entering the project root directory, use the run-ios directive to start the iOS APP:

React-native run-ios

For projects created with version greater than 0.45, you may see the following error:

Error: Build failed: Unpacking / Users/zjy/.rncache/boost_1_63_0.tar.gz... Print: Entry, ": CFBundleIdentifier", Does Not Exist

Degraded version scheme

After multi-party search, I found that the problem is the lack of resources when downloading and installing the node dependency module of the project. At present, version 0.45 and above of * need to download the boost library, which is too large, which leads to downloading problems. Refer to:

Https://github.com/facebook/react-native/issues/14368

Https://github.com/facebook/react-native/issues/14447

There are two solutions. If you do not pursue the new version and new features, you can lower the version of the project you created, and use the-- version directive to explicitly set the project version:

React-native init MyApp-version 0.44.3

Replace the resource file scheme

The solution that you still want to use the new version is to download the relevant files manually and replace them:

Download the following four related files and replace them in the .rncache directory under the root of the project:

Replace after download:

Cd ~ / .rncache cp ~ / Downloads/boost_1_63_0.tar.gz ~ / .rncache/

Use the cp instruction to copy and replace four files in turn

Then delete the third-party library file under the node_modules/react-native/third-party/ directory:

Rm-r project/node_modules/react-native/third-part

Execute the startup program again:

React-native run-ios

Found to be working properly, then we can edit our project in the editor, such as our react-native entry js file-index.ios.js file, refresh to see the changes.

Other tools

Nuclide

Nuclide is an integrated development environment based on atom editor provided by Facebook, which can be used to write, run and debug React Native applications.

At this point, I believe you have a deeper understanding of "how to build a React Native development environment". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.