Step1 configure the environment

The following software must be installed!!

  1. Homebrew: A free and open source package management system designed to simplify software installation on Mac OS X systems.

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

    Note: The /usr/localdirectory may be writable during homebrew installation.

    sudo chown -R `whoami` /usr/local
Copy the code

  2. Node is a JavaScript environment based on the Chrome V8 engine

    • React Native currently requires NodeJS 5.0 or higher.
    brew install node
Copy the code
    • After installing Node, set up the NPM image to speed up the process (or use the science Web tool). Note: Do not use CNPM! CNPM installed module path is strange, packager can not correctly identify!
    npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Copy the code

  3. Yarn: a package manager that allows you to use code from developers around the world or share your own code. Yarn is a tool that replaces NPM install on Facebook and speeds up node module downloads.

    npm install -g yarn react-native-cli
Copy the code
    • Setting the Mirror Source
    yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Copy the code

  4. React Native now requires Xcode 8.0 or later to download

  5. Watchman: A tool provided by Facebook to monitor file system changes, Packager can quickly catch changes to files for real-time refresh.

    brew install watchman
Copy the code

Step2 generate projects

  1. Initialize a new project

    • Note: The init command creates the latest version by default, whereas current versions 0.45 and above require downloading several third-party libraries such as Boost to compile. In China, it is difficult to download these libraries even if they are over the wall, which makes it impossible to run iOS projects

    • Solution:

      A. Install version 0.44.3

      React-native Init AwesomeProject -- Version 0.44.3Copy the code

      B. Download the third-party library web disk link. After downloading the third-party library web disk link, place it in ~/.rncache

      Enter the ~ directory, that is, the user directory
cd ~   
Create a directory that already exists
mkdir .rncache
Copy the files in sequence
cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/ 
Copy the code
  2. Start Xcode, open itAwesomeProject/iosAnd run
  • Note: items will occupyPort 8081Make sure the port is not occupied before starting! 
    lsof -i:8081
kill9 the port numberCopy the code

AwesomeProject

  1. The following can be modified according to your requirementsindex.ios.js
  • The modifiedcmd+sSave the file for virtual machine usecmd+rRefresh, that is, visible changes.

conclusion

At this point, a simple ios React-Native project is complete