> For the complete documentation index, see [llms.txt](https://zhang699-2.gitbook.io/react-native/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zhang699-2.gitbook.io/react-native/master.md).

# 環境安裝

## [https://github.com/zhang699/ShoppingMall](/react-native/master.md#httpsgithubcomzhang699shoppingmall)

## 環境安裝

1. node ^8.6 (<https://nodejs.org/en/blog/release/v8.6.0/>)
2. yarn (<https://yarnpkg.com/lang/en/docs/install/#windows-stable>)
3. 在command line 執行 `yarn global add react-native-cli`
4. 編輯器 VSCode (<https://code.visualstudio.com/>)
5. 參照此網站下載Android Studio, Java JDK, android sdk

   [https://www.decoide.org/react-native/docs/android-setup.htm](https://www.decoide.org/react-native/docs/android-setup.html)

   目前react-native-camera 需要以下版本的支援才能進行apk compile

```
compileSdkVersion 26
buildToolsVersion 26.0.2�
```

* 做完步驟五，試著在command line 輸入 adb ，會跳出adb command 的help 才算安裝成功
* 手動設定系統環境變數  ANDROID\_HOME 指向 android sdk 目錄，
* > 在 AndroidStudio Preferences -> Appearance & Behavior -> Android SDK 可以看到android sdk 的所在位置
* 若無的話，windows 嘗試在path 環境變數增加這一行`%ANDROID_HOME%\platform-tools`關掉command line 在打一次adb

下載Genymotion 之前先註冊帳號

1. (Android Emulator)Genymotion (<https://www.genymotion.com/download/>)
2. 然後按照此教學新增一版android 5.0 以上的模擬器 <https://briian.com/15110/>-
3. 設定成低解析度與少記憶體，避免降低電腦的效能，影響開發
4. * 1280x720 320dpi 1024MB 1 core

> Personal use 的 genymotion: <https://www.genymotion.com/fun-zone/>

## 安裝專案module

專案位置：`https://github.com/zhang699/shoppingMall_.git`

`git clone https://github.com/zhang699/shoppingMall_.git`

### For Windows 的前置步驟

請先使用此指令在administrator shell (Run as Admiinstrator) 安裝相關工具，

`npm install --global --production windows-build-tools`

> 之後確認PYTHON 有在系統環境 path 之中， PYTHON可能的位置C:\Users\\\[USER\_NAME].windows-build-tools\python27\\

若無安裝PYTHON，手動下載PYTHON 2.7.14 進行安裝

告知yarn build tools 的版本

`yarn config set msvs_version 2015 --global`

### 各平台都要做的步驟

* 專案根目錄下進行 `yarn install`
* `yarn start` (開啟 packager) 若出現下述問題，請改用 `react-native start`

  ```
  ```
* 開啟Android Studio `start from existing project` 選擇./android 讓Studio 協助檢查有無缺少的sdk / buildTool / gradle 要裝
  * > 因為相依的library project 使用到 不同版本的android-sdk
* * 當 Studio 出現 `Import missing platform and sync project`點下去讓她自行安裝
  * 第一次Build 的過程需要一段時間，有很多jar 要載
* 安裝完畢後，先把Genymotion Emulator 打開，然後下`react-native run-android`之前，讓APK 可以安裝，最後模擬器的的畫面會出現這樣
* 點擊`Test your Camera` 看是否能夠開啟相機，能夠開啟的話，環境安裝就算成功了。

![](/files/-LfNColzftTz_AwgNq35)

### 其他：

安裝react-native debugger

<https://github.com/jhen0409/react-native-debugger/releases>

* Component's `state` and `props`
* Redux action and store
* Console.log, info ... etc