React Native Development Notes

Reactnativedemo

Learn reactnative development, build reactnative first project

React Native Development Notes

1, installation Homebrew

$/USR/BIN/RUBY-E "$ (curl-fssl https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Install wget, git, curl tools

Each time you execute a brew command, it is a good idea to perform a brew update or brew upgrade to keep these programs up to date.

$ Brew Update

Next Install the Wget tool

$ Brew Install wget

Tools to install git command execution

$ Brew Install Git

Installing the Curl Tool

$ Brew Install Curl

3. Install the NPM tool, which automatically installs node. js and automatically sets environment variables

$ Brew Install NPM

Install telnet command, Mac OS comes with, do not need to install

$ Brew Install Telnet

Error:no available formula with the name "Telnet"

Install Bower, gulp build JS tool

$ npm Install Gulp Bower-g

$ NPM Install Gulp-g

Install node. js, check node. js, and use

$ node

> Console.log ("Hello");

Hello

>. exit

Installing Watchman, debugging JS Tools

$ Brew Install Watchman

Install flow, Debug JS Tools

$ Brew Install Flow

See the list of tools installed under brew

$ brew List

Curl git OpenSSL Watchman

Flow node Pcre wget

4. Quick Start

1. Installing React Native Components

React Native requires some basic installation that is clarified in the beginning React Native. After the installation of these dependencies has been completed, there are two commands that can be fully prepared for a React Native project.

$ NPM install-g react-native-cli

REACT-NATIVE-CLI is a command-line tool that completes the remaining installation. It is installed through NPM. This will install the react-native command line in your terminal, you only need to do it once.

$ react-native init awesomeproject

Because of well-known network reasons, the React-native command line will be in trouble when dragging code from NPM official source. Please replace the NPM repository source with a domestic mirror:

NPM Config Set Registry https://registry.npm.taobao.org

NPM Config set Disturl https://npm.taobao.org/dist

Also, do not precede the init with sudo (otherwise the directory owner of the new project will become root instead of the current user, causing a series of permissions problems, please use chown fix).

2. Running iOS Apps

$ CD Awesomeproject

Open ios/awesomeproject.xcodeproj with Xcode and click the Run button.

Open the Index.ios.js with your favorite text editor and change to a few lines.

Press "-R" in iOS emulator to refresh the app and see your latest changes!

3. Running Android App

$ CD Awesomeproject

$ react-native run-android

Open Index.android.js with your favorite text editor and change to a few lines

Press the Menu key (usually F2, in the Genymotion simulator is? +m) and select Reload JS to see your latest changes.

Run adb logcat *:s reactnative:v reactnativejs:v in the terminal to see the logs for your app.

5. Add Android support for existing react native project

If you already have an iOS-only version of the React native project and want to add Android support, you'll need to run the following command in your project directory:

Open the Package.json file, locate the react-native in the dependencies entry, and then modify the version number to the latest version.

$ NPM Install

$ react-native Android

6. Start Watchman Service

View Watchman service startup results

Run in Browser:

Http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false

To see if the result is not the following effect, the service started successfully.

7. Operation Result

1, the first operation of mobile phone must be error

2. Shake the phone at this time, click on Dev Settings, click Debug Server Host & port for device, set IP and ports

3, the IP here is the computer's IP, do not know the command line can enter ipconfig to query, port number fixed 8081

4, after the setup is complete, back to the blank page, shaking a mobile phone again, choose Reload JS, the program runs up, appears welcome to React native!

5, the first run React Native project end.

React Native Development Notes