Skip to content

Latest commit

 

History

History
252 lines (157 loc) · 6.1 KB

01.md

File metadata and controls

252 lines (157 loc) · 6.1 KB

React Native Environment Setup

The development target OS is macOS, and both of Android and iOS will instruct below.

iOS

Installing Dependencies

Node, Watchman, the React Native CLI, and Xcode are required.

Node, Watchman

  1. NodeJS: version 8.11.1(LTS) is available now
  2. Watchman: is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

Both of then, you can install by Homebrew

brew install node
brew install watchman

The React Native CLI

Install React Native command line interface via npm

npm install -g react-native-cli

:::warning If you get an error like Cannot find module 'npmlog', try installing npm directly: curl -0 -L https://npmjs.org/install.sh | sudo sh. :::

Xcode

The easist way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app. Make sure it is version 8 or higher.

Command Line Tools

  1. Open Xcode.
  2. Choose "Preferences..." from the Xcode menu.
  3. Switch to "Location" tab.
  4. Install the most recent version Command Line Tools. GettingStartedXcodeCommandLineTools

Creating a New Application

Use React Native command line to create a new app call "AwesomeProject"

react-native init AwesomeProject

Running React Native application

cd AwesomeProject
react-native run-ios

You should see your new app running in the iOS Simulator shortly.

GettingStartediOSSuccess

You can also run it directly from within Xcode.

Modifying app

  • Entry point is "App.js".
  • Hit ⌘R in your iOS Simulator to reload the app.

Android

Installing Dependencies

Node, Watchman, the React Native CLI, JDK, and Android Studio are required.

Node, Watchman

As iOS, Node and Watchman are installed as below:

brew install node
brew install watchman

The React Native CLI

Install React Native command line interface via npm

npm install -g react-native-cli

Java Development Kit

Java SE Development Kit (JDK) is required. Download and install JDK 8 or newer.

JDK macOS

Android development environment

  1. Install Android Studio
  2. Choose Custom install step, make sure options as below are checked.
    • Android SDK
    • Android SDK Platform
    • Performance (Intel ® HAXM)
    • Android Virtual Device

Android Studio setup

Install Android SDK

React Native require Android 6.0 (Marshmallow) or higher.

SDK manager can be accessed from the "Welcom Android Studio" screen.

  1. Click "Configure"
  2. Select "SDK Manager"

Welcom Android Studio

  1. Select "SDK Platforms"
  2. Click "Show Package Details"
  3. Look for "Android 6.0 (Marshmallow)", make sure options as below are checked.
    • Google APIs
    • Android SDK Platform 23
    • Intel x86 Atom_64 System Image
    • Google APIs Intel x86 Atom_64 System Image

SDK Platforms

  1. Select "SDK Tools" and check "Show Package Detail" as well
  2. Look for "Android SDK Build-Tools" and make sure 23.0.1 is selected.

SDK Tools

Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

  1. Add the following lines to your $HOME/.bash_profile:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

:::warning You use instructions as below to edit enviroment variables: touch ~/.bash_profile; open ~/.bash_profile :::

  1. Type source $HOME/.bash_profile to load the config into your current shell.

  2. Verify that ANDROID_HOME has been added to your path by running echo $PATH.

You will see enviroment path as below:

Enviroment Vars

Creating a New Application

Use React Native command line to create a new app call "AwesomeProject"

react-native init AwesomeProject

Preparing the Android device

All avaliable devices are listed in Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio.

  1. Open current exist project by Android Studio, and look for this icon AVD
  2. Click "Create Virtual Device"

Create Device

  1. Select "Phone" category, exist phone image (maybe is Nexus 5X API 27 x86) and click next.

Setup AVD

  1. Select to "x86 images" tab
  2. Looking for Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

API23

  1. Click "Next" and "Finish" to create image

Success

  1. You can run the device by pressing "Start" button

Running React Native application

cd AwesomeProject
react-native run-android

You should see your new app running in the Android Simulator shortly.

GettingStartedAndroidSuccessMacOS

You can also run it directly from within Android Studio.

Modifying app

  • Entry point is "App.js".
  • Press the R key twice or select Reload from the Developer Menu (⌘M) to see changes.

Reference

  1. https://facebook.github.io/react-native/docs/getting-started.html
  2. https://facebook.github.io/react-native/docs/running-on-device.html
  3. http://blog.ctrlxctrlv.net/mac-environment-path/
  4. https://stackoverflow.com/questions/30461201/how-do-i-edit-path-bash-profile-on-osx
  5. https://developer.android.com/studio/run/managing-avds.html
tags: React Native Setup