傳統安裝設定

搭建傳統Native開發環境 2020/6

1‧安裝原生開發工具

  • Android

    • 安裝JDK

    JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本,注意 1.8 版本官方也直接称 8 版本)

    https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

    • 安裝Android Studio and Android SDK Tools

    https://developer.android.com/studio

    • 配置 ANDROID_HOME 路徑

    安裝後要確認執行路徑已加到環境變數中

    Linux 環境:

    vi ~/.bash_profile export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools export ANDROID_HOME=~/Library/Android/sdk //設定完成後重啟android studio

    Windows 環境:

    進階系統設定 -> 新增,创建一个名为ANDROID_HOME的系統變數,指向你的 Android SDK 所在的目录

    SDK 默认是安装在下面的目录:

    c:\Users\你的用户名\AppData\Local\Android\Sdk
    

    可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & BehaviorSystem SettingsAndroid SDK

    • 把一些工具目录添加到环境变量 Path 中

    选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin

    %ANDROID_HOME%\platform-tools
    %ANDROID_HOME%\emulator
    %ANDROID_HOME%\tools
    %ANDROID_HOME%\tools\bin

  • iOS

    • 到App Store 下載安裝 Xcode

2‧安裝 Node, Python2

Node 的版本应大于等于 12

Python 的版本必须为 2.x(不支持 3.x)

https://www.python.org/downloads/release/python-2718/

3‧安裝輔助工具

  • Chrome擴充功能:React Developer Tools

  • Watchman 監視文件系統變更的工具

  • Postman API 測試工具

4. 安裝Android 模擬器

使用"AVD Manager"来查看可用的虚拟设备,並安裝需要的設備型號。

使用React Native

  • 1.初始化專案

// 下載建立整個架構檔案
// 專案命名時,不能使用 - 
// NPX可以使用諸如React Native CLI之類的工具來啟動構建
// ,而無需事先進行全局或本地安裝
npx react-native init <project-name>

如果你之前全局安装过旧的react-native-cli命令行工具,其版本不會自動更新,可先移除後再安裝,避免版本過舊。

// 安裝 ( 若 npx 無效時可安裝 react-native-cli 代替)
npm install -g react-native-cli
// 移除
npm uninstall -g react-native-cli

  • 2.編譯為原生語言及執行專案

    • iOS

    • Android

      cd <project-name>
      //确保你先运行了模拟器或者连接了真机
      // 若未安裝 yarn,先安裝 yarn 
      // npm install -g yarn
      // 第一次运行时需要下载大量编译依赖,耗时可能十分钟
      // 用 git bash 執行
      yarn android
      # 或者
      yarn react-native run-android
      

      若要使用 NativeBase 要另外安裝

2018 年測試除錯方法記錄:

react-native报错:Could not find com.android.tools.build:gradle:3.0.1. 解決方式:在build.gradle添加google的maven仓库

buildscript {
    repositories {
        //新的插件需要在google仓库下载
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
    }
}

react-native报错:Could not connect to development server 解決方式:執行下方指令開啟

//開啟Gradle packager
react-native start

若有Could not read path的錯誤,可嘗試建立缺少的資料夾 若有AndroidStudio SDK directory does not exists的錯誤,可能會顯示已下載的套件無LICENCE。 此時要確認路徑是否是在C:\Users\Jim\AppData\Local\Android\Sdk(在android studio中)。若無此路徑或路徑指向錯誤,要先設定全域變數ANDROID_HOME。

  • 對React Native版本進行升級

    將現有的架構更新版本,除自寫的程式外,都可能更新

//檢查現有版本
react-native --version

//安裝升級工具
npm install -g react-native-git-upgrade
//在專案目錄下執行
react-native-git-upgrade

//也可直接指定版本
react-native-git-upgrade X.Y.Z
  • 偵錯方式

  • 1.用Chrome開發者工具

    • Debug JS remotely:chrome會開啟localhost:8081可進行除錯

  • 2.用內建的開發者選單

    iOS摸擬器快捷鍵:command + D Android摸擬器快捷鍵:Ctrl + M

    • Reload:手動更新,重新載入遠端的javascript(不會重新編譯)

    • Enable Live Reload:自動更新(若有修改到檔案的層級要重新執行run,才會重新編譯)

    • Enable Hot Reload:增量自動更新

    • Start Systrace:開啟效能分析。結束後會產生一份報告給開發者

    • Toggle Inspector:即時顯示介面上元素的風格設定、應用的網路存取

    • Perf Monitor:用來顯示應用的狀態資訊

  • 在實機上執行React Native專案

Last updated