React-native - Install & Lauch & Filling Holes

Mitchell

Install

• First step: install react-native:

//Make sure you have npm, if not install it.
brew install npm  
//Install create-react-native-app
npm install -g create-react-native-app  
//Install react-native-cli
npm install -g react-native-cli  

Init

• You can use this command as followed:

create-react-native-app init projectName  

Lauch

• You may have this command to launch your project:

//Move into your project directory
cd projectDir  
//Launch your project
react-native run-ios  

IDE Choose

• You can choose the IDE what you want. I use WebStorm for it's simpler and stronger. You can also use Sublime and others.

Here are some questions through I install and launch:

1.error when I launch my project

• Question:

//The description is
21:37:47: Unable to start server  
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:  
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

• The solution:

// Do as the command alert
sudo sysctl -w kern.maxfiles=5242880  
sudo sysctl -w kern.maxfilesperproc=524288  

2. Mac's environment config error

• Question:
  • While I use npm with old version I download the new one from the net again, but I have a problem with my environment as followed:

-bash: create-react-native-app: command not found

• The solution：
  • 1.Open Terminal
  • 2.Run the command sudo nano /etc/paths
  • 3.Input your secret
  • 4.Locate to the end of the file, add your path what you want.
  • 5.Click control-x to log out
  • 6.Input "Y" to make sure to modify
• Have a test： Open a new terminal and input：

echo $PATH  

You will see:

XXX ~ userName$ echo $PATH  
/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/share/npm/bin

Reference

3.npm 5.x version is not match

• Question:
  • As npm's update result in the version is not match, the error may as followed:

npm版本不适配.png

• The solution:
  • reduce the version of npm

npm install npm@4 -g  

recheck the version of npm

npm -v  

• The reduce will be failed if the version of npm is not change, you need to reduce the version of npm manually. You must find the directory of npm for last version and remove it and then rerun the commands above.

Link for the question for npm

4.Can't verify the install for Xcode and simulator

• Question
  • The description is as followed：

:AwesomeProject xxx$ npm run ios

> AwesomeProject@0.1.0 ios /Users/.../Desktop/React-native/AwesomeProject
> react-native-scripts ios

下午8:20:47: Starting packager...
下午8:22:16: Starting simulator...
Unable to check Xcode version: Error: Process exited with non-zero code: 1  
下午8:22:16: Failed to start simulator:
Unable to verify Xcode and Simulator installation.  
Exiting...  

• The solution： Open Xcode -> Preference -> Location -> Command Line Tools and check it。

5.Waiting for a longtime when you run the script

• When I run npm run ios for many times at the beginning，I always have a long time waiting for my project to be launched when the command line is stopping at Starting simulator... as the time is frozen. So I tried to find the answer in the net and find the similar question .Three is a way using yarn to replace npm and the command is from npm run ios to yarn run ios. While when I use yarn I have some other questions:
  • Run environment error

command not found  

• After you donwload yarn, you can see the environment it output. You can write the environment into the file as Question One mentioned and then restart it you can find everything will be ok!
• And the time really be frozen one more time. After 5 minutes I find a application called Expo installed on my simulator.

Solution

• End here, you finish your install for React-native Environment desciption：

xxx:~ xx$ npm -v  
4.6.1  
xxx:~ xx$ node -v  
v9.7.1  
xxx:~ xx$ react-native -v  
react-native-cli: 2.0.1  
xxx:~ xx$ yarn -v  
1.5.1