環境安裝

https://github.com/zhang699/ShoppingMall

環境安裝

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

   目前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 看是否能夠開啟相機，能夠開啟的話，環境安裝就算成功了。

其他：

安裝react-native debugger

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

• Component's state and props

• Redux action and store

• Console.log, info ... etc