React-native enviroment(2018_5_5)

react ->

react-native init [專案名稱]   //建立專案
react-native run-android/ios   //啟用專案

android-emulator->  
> C:\Users\motx2152000\AppData\Local\Android\Sdk\tools  //到指定目錄
android create avd -n "[模擬器名稱]" -k "[system-image]" //建立模擬器
emulator -list-avds    //列出模擬器清單
emulator @[模擬器名稱] //開啟模擬器


web-debugger -> 
http://localhost:8081/debugger-ui

vscode-debugger ->
react-native run android/ios -> debugger android/ios(launch.json)

※(windows)CTRL + M "develop menu"
※(ios)command + D "develop menu"



手順 : 開啟模擬器 > 專案 run android/ios > react-devtools(debugger ui)> http://localhost:8081/debugger-ui/(debugger js)



//實體機器debugger

case 1 :
adb logcat *:S ReactNative:V ReactNativeJS:V //只針對 ReactNative:V  、ReactNativeJS:V  兩執行續作debugger
case 2 : 
1.adb reverse tcp:8081 tcp:8081 // <-- adb set url

2.enter application

3.adb shell input keyevent 82 //open dev menu

4.chose enable remote debugger


//import react-native module (android)
1. 至 ./android/settings.gradle 新增
include ':react-native-vector-icons' // 'react-native-vector-icons' is module name 
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') //module path
2. 至 ./android/app/build.gradle 新增
dependencies {
    ....
    compile project(':react-native-vector-icons')
}
3.至 ./android/app/src/main/java/MainApplication.java 新增
 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          ... other package()                //<= import react native module 
          new VectorIconsPackage()           //<= append this
      );
    }
※ 1.3 步驟可用 react-native link react-native-vector-icons 代替

enviroment:
(MAC OS)
npm  : 3.10.9
node : 6.9.2
java : 1.8.0_111
react-native-cli : 2.0.1

(WINDOWS OS)
npm  : 3.10.10
node : 6.11.3
java : 1.8.0_144
react-native-cli : 2.0.1