react native開發環境搭建

安裝教程簡單，需要有一定的基礎，僅供參考

一、背景

React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架，簡單點說就是可以用它構建原生APP

二、安裝配置

1.軟件下載

以下是本機運行使用的react-native環境,所需軟件需要自行下載安裝
- Windows 10 專業版
- node版本 >= 4.5, now 8.9.9
- npm 3.3.3
- Android Studio: v >= 2.0 now 2.3
- jdk 1.8.0_131

注意：需要使用Android Studio 2.0或更高版本，node版本需要 >= 4.5，jdk >= 1.8，
給出軟件版本可能會有誤差,不願麻煩可以參考我的版本

2.軟件安裝

Android Studio

軟件包含Android SDK 和 模擬器，以下是安裝需要特別注意的地方

1. SDK Platforms窗口中，選擇Show Package Details，然後在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image

2. 在SDK Tools窗口中，選擇Show Package Details，然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須包含有這個版本。當然如果其他插件需要其他版本，你可以同時安裝其他多個版本）。然後還要勾選最底部的Android Support Repository.

#

注意：下載Android SDK並配置環境變量（Android SDK Build-Tools 23.0.1）必須包含版本

Node.js

下載地址：https://nodejs.org/en/download/

3.環境配置

環境根據自己軟件的安裝目錄自行配置
1.配置jdk環境變量

2.配置Android SDK環境變量
- %ANDROID_HOME%\tools;
- %ANDROID_HOME%\platform-tools

3.配置Node環境變量
- D:\Program Files\nodejs\

4.安裝react-native

以下是我真實的安裝過程

1） 開始安裝

$ npm install -g yarn react-native-cli

2） 安裝完yarn後同理也要設置鏡像源：

$ yarn config set registry https://registry.npm.taobao.org –global

$ yarn config set disturl https://npm.taobao.org/dist –global

3） 創建項目

$ react-native init first-project

// error： “first-project” is not a valid name for a project.

$ react-native init firstProject

出現以下提示，項目創建完成

To run your app on iOS:
cd D:\AppWorkspace\reactNative\firstProject
react-native run-ios
- or -
Open ios\firstProject.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd D:\AppWorkspace\reactNative\firstProject
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android 

$ cd first-project

4）在模擬器上運行項目

$ react-native run-android

error： Command `run-android` unrecognized.
Make sure that you have run `npm install` and that you are inside a react-native project.

$ npm install

ERR：npm ERR! Cannot find module 'internal/util/types'
解決方法：刪除目錄“C:\Users\lyqhn\AppData\Roaming\npm\node_modules”下的npm文件夾

$ npm install -g npm

注意：沒有上面的錯誤請忽略上條命令

$ react-native run-android

ERR: Checking the license for package Android SDK Build-Tools 23.0.1 in D:\Applications\Android\sdk\licenses

Warning: License for package Android SDK Build-Tools 23.0.1 not accepted.
該錯誤是因爲之前的SDK不包含 Android SDK Build-Tools 23.0.1的版本

以上問題解決後再次執行命令

$ react-native run-android

注意：執行命令"react-native run-android"，需要先打開AVD

#

END: BUILD SUCCESSFUL.出現此提示後會將打包好的項目安裝到AVD

5.others

1）單獨啓動模擬器，不需要打開Android Studio

• $ emulator -avd AVD-25

2）HelloWorld示例-App.js

import React, { Component } from 'react';
import {
  Text
} from 'react-native';

export default class App extends Component<{}> {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

3）不太明白

react-native中文網：http://reactnative.cn/docs/0.50/getting-started.html

最後，感謝您的閱讀，有問題請及時給出您寶貴的建議