The React Native app development team has plans to use React Native app development in the near future. We can’t wait to try it out. First, set up the development environment and run our classic apps.

Install the package management tool

I use a Mac environment, so on the Mac, for example, for Windows, there is not much difference.

Install Homebrew

Homebrew is an integrated package management tool tailored for Mac OS that makes it easy to install node.js and switch node.js versions.

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

Note: The /usr/local directory may be unwritable when Homebrew installation software is used in Max OS X 10.x. In this case, you can run the following command to rectify the problem:

sudo chown -R `whoami` /usr/localCopy the code

Installation Node. Js

Install Node.js using Homebrew. For Windows, you can download node.js directly from the official website:

brew install nodeCopy the code

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

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --globalCopy the code

Installation Package Management

You can choose to use NPM directly or install the Yarn package management tool. You are familiar with NPM. Here we use Yarn as an example:

Yarn is a tool provided by Facebook to replace NPM and speed up the download of Node modules.

NPM is still required to install the Yarn package:

npm install -g yarnCopy the code

We can then use YARN add instead of NPM install –save.

Install the React-native CLI scaffolding

React Native provides one-click scaffolding to generate the initial structure of a project, which beginners or experiencers can install directly:

npm install -g react-native-cliCopy the code

Install the Settings editor

For Mac, we use Xcode to develop iOS apps. For Android, we can use Eclipse, etc. In addition, we need to configure the Xcode editor to support React Native:

Click on the Menu- > Preferences- > Locations of the Xcode editor, and configure the command line tools as shown in the red box below:

Xcode command line tool configuration

Initialize the project and resolve runtime exceptions

Now you can initialize a sample program using scaffolding:

// Initialize a hello project with react-native init hellocd helloCopy the code

After entering the project root directory, use the run-ios command to launch the ios APP:

react-native run-iosCopy the code

For build projects with a version higher 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 ExistCopy the code

Degraded Version Scheme

The latest version 0.45 and above requires the download of boost library, which is too large, resulting in download problems. Please refer to:

  1. Github.com/facebook/re…
  2. Github.com/facebook/re…

There are two solutions. If you don’t pursue new features, you can lower the version of the project you create by using the –version command to explicitly set the version of the project:

React-native init MyApp --version 0.44.3Copy the code

Replace resource file scheme

If you still want to use the new version of the solution, manually download the relevant files to replace:

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

Rncache file

Download address: pan.baidu.com/s/1kV5iVzD.

Download and replace:

cd ~/.rncache
cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/Copy the code

Copy and replace four files in sequence with cp instruction;

Node_modules /react-native/third-party/

rm -r project/node_modules/react-native/third-partCopy the code

Execute the launcher again:

react-native run-iosCopy the code

The react-native js file, index.ios.js, can be updated to see the changes.

Other tools

Nuclide

Nuclide is an Atom-based integrated development environment provided by Facebook for writing, running, and debugging React Native applications.

Nuclide’s introductory documentation

Original article, welcome to visit my blog: Xiong Jiangang’s blog.