ReactNative環境搭建

凌浩雨發表於2018-03-16

React-Native 中文網

React-Native 官網

1. Python2

2. Node

# 設定映象源
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3.Yarn、React Native的命令列工具(react-native-cli)

# 安裝yarn和React-native-cli
npm install -g yarn react-native-cli
# 設定映象源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
  • 建立專案
# 初始化專案
react-native init abcd
# 執行專案
react-native run-android

4. 裝置上執行

$ adb devices
List of devices attached
emulator-5554 offline   # Google模擬器
14ed2fcc device         # 真實裝置

5. 裝置上訪問開發伺服器

1). (Android 5.0及以上)使用adb reverse命令

注意,這個選項只能在5.0以上版本(API 21+)的安卓裝置上使用。
首先把你的裝置通過USB資料線連線到電腦上,並開啟USB除錯(關於如何開啟USB除錯,參見上面的章節)。

1.  執行`adb reverse tcp:8081 tcp:8081`
2.  不需要更多配置,你就可以使用`Reload JS`和其它的開發選項了。

2). (Android 5.0以下)通過Wi-Fi連線你的本地開發伺服器

1.  首先確保你的電腦和手機裝置在**同一個Wi-Fi環境**下。
2.  在裝置上執行你的React Native應用。和開啟其它App一樣操作。
3.  你應該會看到一個“紅屏”錯誤提示。這是正常的,下面的步驟會解決這個報錯。
4.  搖晃裝置,或者執行`adb shell input keyevent 82`,可以開啟**開發者選單**。
5.  點選進入`Dev Settings`。
6.  點選`Debug server host for device`。
7.  輸入你電腦的IP地址和埠號(譬如10.0.1.1:8081)。**在Mac上**,你可以在系統設定/網路裡找查詢你的IP地址。**在Windows上**,開啟命令提示符並輸入`ipconfig`來查詢你的IP地址。**在Linux上**你可以在終端中輸入`ifconfig`來查詢你的IP地址。
8.  回到**開發者選單**然後選擇`Reload JS`。

6. 專案效果

img_294c1f33180852db5a11491a2489781a.png
效果.png