ReactNative環境搭建
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. 專案效果
相關文章
- ReactNative之從HelloWorld中看環境搭建、元件封裝、Props及StateReact元件封裝
- 環境搭建
- windows環境下Django環境搭建WindowsDjango
- react環境搭建React
- LNMP 環境搭建LNMP
- 搭建Java環境Java
- Vagrant 環境搭建
- Flutter環境搭建Flutter
- swoft 環境搭建
- OpenGL 環境搭建
- 搭建gym環境
- 搭建lnmp環境LNMP
- Angular環境搭建Angular
- JDK環境搭建JDK
- keil環境搭建
- Dubbo環境搭建
- mac搭建環境Mac
- FNA 環境搭建
- FNA環境搭建
- Maven 環境搭建Maven
- spark環境搭建Spark
- Hive環境搭建Hive
- centosLAMP環境搭建CentOSSLAMLAMP
- lnmp環境搭建LNMP
- ZooKeeper環境搭建
- lnamp環境搭建
- java 環境 搭建Java
- MAVEN環境搭建Maven
- App環境搭建APP
- gogs環境搭建Go
- Windows環境下的Nginx環境搭建WindowsNginx
- window環境下testlink環境搭建(xammp)
- 以太坊-Win環境下remix環境搭建REM
- 【環境搭建】RocketMQ叢集搭建MQ
- Flutter Engine環境搭建Flutter
- iOS逆向環境搭建iOS
- docker搭建php環境DockerPHP
- Supervisor 環境搭建