歷史節(jié)點
- 2012年9月11日, 馬克·扎克伯格(Mark Zuckerberg)--Facebook最大的錯誤就是在HTML5上下注太多
- 2013年5月30日，F(xiàn)acebook公司對外正式發(fā)布 ReactJS
- 2015年3月26日钙态，F(xiàn)acebook公司對外正式發(fā)布 React Native -- 使用React框架跨平臺開發(fā)原生 IOS 移動應(yīng)用寺惫。
- 2015年9月15日，React Native 支持開發(fā)原生 Android 移動應(yīng)用蕉毯。
詞匯表
- React -- 一個JavaScript框架乓搬，用于構(gòu)建“可預(yù)期的”和“聲明式的”Web用戶界面思犁，它已經(jīng)使Facebook更快地開發(fā)Web應(yīng)用。
- Native -- 意指原生, React Native 使用 React 來開發(fā)Native(原生)的APP进肯。
安裝開發(fā)環(huán)境(Windows 10 & Android)
說明
為了能夠保證一次就順利安裝完成激蹲，請嚴格按照文檔順序來操作。
參考網(wǎng)址：
react native中文網(wǎng)
react native on github.io
安裝python江掩、nodejs学辱、git、HAXM和Java-1.8
還沒開始學就遇到第一個坑频敛，國內(nèi)網(wǎng)絡(luò)封堵的厲害项郊，官網(wǎng)上建議用的Chocolatey包管理器來安裝Python、NodeJS和Java遇到各種超時和報錯斟赚。因此需要自己分別到 Python官網(wǎng)着降、 NodeJS官網(wǎng)、
Git-SCM拗军、
intel HAXM和
Java官網(wǎng)去下載和安裝任洞。
備注：目前只支持Python2.7；詳細的HAXM安裝說明請點擊這里发侵。
設(shè)置環(huán)境變量
打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級系統(tǒng)設(shè)置 -> 高級 -> 環(huán)境變量 -> 用戶變量 -> Path -> 編輯
- Python
C:\Python27 - NodeJS
C:\Program Files\nodejs - Git-SCM
C:\Program Files (x86)\Git\bin - Java
C:\Program Files\Java\jdk1.8.0_111
驗證安裝結(jié)果
Python
C:\Users\zhengtong>python
Python 2.7.13 (v2.7.13:a06454b1afa1, Dec 17 2016, 20:53:40) [MSC v.1500 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> # 敲入Ctrl + C組合鍵 或 quit() 退出交掏。
Nodejs
C:\Users\zhengtong>node
> # 敲入Ctrl + C組合鍵 退出。
Git
C:\Users\zhengtong>git version
git version 2.7.2.windows.1
HAXM
C:\Users\zhengtong> sc query intelhaxm
SERVICE_NAME: intelhaxm
TYPE : 1 KERNEL_DRIVER
STATE : 4 RUNNING # 確保狀態(tài)是 running
(STOPPABLE, NOT_PAUSABLE, IGNORES_SHUTDOWN)
WIN32_EXIT_CODE : 0 (0x0)
SERVICE_EXIT_CODE : 0 (0x0)
CHECKPOINT : 0x0
WAIT_HINT : 0x0
Java
C:\Users\zhengtong>java -version
java version "1.8.0_111"
Java(TM) SE Runtime Environment (build 1.8.0_111-b14)
Java HotSpot(TM) 64-Bit Server VM (build 25.111-b14, mixed mode)
上面這五個軟件的驗證都沒有任何報錯, 且正常顯示出對應(yīng)信息則表示軟件已經(jīng)安裝成功刃鳄，而且環(huán)境變量已經(jīng)設(shè)置正確盅弛。
安裝React Native命令行工具(The React Native CLI)
用npm來安裝react native cli還是網(wǎng)絡(luò)封堵問題，因此需要將原鏡像倉庫地址指向到淘寶提供的鏡像倉庫叔锐。
打開cmd命令行窗口
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
執(zhí)行react native cli安裝命令
npm install -g yarn react-native-cli
安裝Android Studio開發(fā)工具(IDE)
下載地址： Android Studio IDE
注意： 整個Android Studio安裝過程被拆分成三部分挪鹏，第一部分是exe文件解壓(也就是我雙擊android-studio-bundle-145.3537739-windows.exe這個安裝包)。
第二部分：解壓好了之后開始進入向?qū)?該向?qū)匀粫侔惭b一些東西)愉烙，在向?qū)У腎nstall Type界面(選擇Custom)讨盒，
然后再SDK Components Steup界面(全部勾選)，這時會到google上去下載一些組建步责，漫長的等待返顺。
第三部分：向?qū)瓿芍螅瑫棾鲆粋€ welcome to android studio界面,
選擇該窗口右下腳的 <configure> -> <SDK Manager>蔓肯，分別勾選:
- 點擊右下角的Show pakage details.
- 勾選 Google APIs
- 勾選 Intel x86 Atom System Image
- 勾選 Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
注意：這里必須勾選 Android 6.0(Marshmallow)
切換到SDK Tools分頁
- 點擊右下角Show pakage details.
- 在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1遂鹊。（必須是這個版本）
接著又是漫長的等待。
設(shè)置用戶環(huán)境變量
確保ANDROID_HOME環(huán)境變量正確地指向了你安裝的Android SDK的路徑蔗包。
打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級系統(tǒng)設(shè)置 -> 高級 -> 環(huán)境變量 -> 用戶變量 -> 新建
將Android SDK的Tools目錄添加到PATH變量中
打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級系統(tǒng)設(shè)置 -> 高級 -> 環(huán)境變量 -> 用戶變量 -> Path -> 編輯
- 增加tools, 下面這個是我自己操作系統(tǒng)的路徑.
C:\Users\zhengtong\AppData\Local\Android\sdk\tools - 增加plateform-tools, 下面這個是我自己操作系統(tǒng)的路徑.
C:\Users\zhengtong\AppData\Local\Android\sdk\platform-tools
驗證安裝
- 啟動手機模擬器.
1.1 打開虛擬設(shè)備管理界面C:\Users\zhengtong>android avd虛擬設(shè)備管理界面
1.2 創(chuàng)建一個手機模擬器
創(chuàng)建手機模擬器
1.3 點擊start
啟動手機模擬器
1.4 顯示安卓系統(tǒng)則表示正常
啟動手機模擬器
- 啟動項目.
顯示如下圖片則表示整個安裝過程已經(jīng)順利結(jié)束稿辙。react-native init AwesomeProject cd AwesomeProject react-native start react-native run-android
項目已順利啟動
安裝過程報錯記錄
-
Cannot read property 'message' of undefined
控制臺報錯信息
C:\Users\zhengtong\AwesomeProject>react-native run-android JS server already running. Running C:\Users\zhengtong\AppData\Local\Android\sdk/platform-tools/adb -s fce7e07a reverse tcp:8081 tcp:8081 Building and installing the app on the device (cd android && gradlew.bat installDebug)... FAILURE: Build failed with an exception. What went wrong: A problem occurred configuring project ':app'. failed to find Build Tools revision 23.0.1 Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. BUILD FAILED解決辦法(更新 android sdk platform-tools revision 23.0.1)：
Android\sdk\tools > android list sdk -a
Show lists of sdk
Find tools line and type the following entry in the line number.
12 - Android SDK Platform-tools, revision 23.0.1 and update
Android\sdk\tools > android update sdk -a -u -t 12 -
No connected devices!
控制臺報錯信息C:\Users\zhengtong\AwesomeProject>react-native run-android ... ... :app:installDebug FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No connected devices!github上大致的描述是說, 要啟動安卓項目, 首先需要配置好虛擬設(shè)備(例如：Nexus 4、Samsung Galaxy 4等)气忠。
調(diào)用如下命令可以啟動虛擬設(shè)備管理窗口邻储，先添加或clone一個已經(jīng)配置好的虛擬設(shè)備模版赋咽。C:\Users\zhengtong\AwesomeProject>android avd然而我添加好了之后，啟動虛擬設(shè)備, 又報一個<emulator: ERROR: x86_64 emulation currently requires hardware acceleration!> 吨娜， stackoverflow上說是因為沒有安裝硬件虛擬化加速驅(qū)動脓匿。在這里下載，然后安裝就可以了宦赠。
