最新React Native環境搭建(從0到打包APK)

React Native 之旅

React Native 踩坑開始

★

5.1 假期 就這樣短暫的結束了，你都幹啥了？

😂，我嘛加了3天班，大家呢？

​ 最近公司有個React Native 項目，不得不學習下RN了。因爲以前學過React，學React Native 過程還算能夠，不太艱難。

學習React Native 踩了好多坑，總結文章，以便別的小夥伴開發RN,能夠輕鬆上手，減小踩坑。😂

」

---

React Native 環境 安裝(必須按照如下3個要求配置安裝，不然會環境錯誤)

• Python 2.x ， 必須安裝2.x 的版本。

• Node， 版本必須在12或者大於12

• Java JDK 環境 必須爲 1.8 版本

缺乏Python 環境

項目依賴安裝工具

• 首選 yarn ，安裝國外資源依賴快

• Npm， 下載速度會很慢，能夠設置淘寶源，加快速度

手機模擬器 調試

• 安裝 Android Studio （須要配置AS 的環境，這裏就不介紹了）

• 夜深模擬器

• 其它模擬器

---

安裝 React Native 腳手架

★

我以前是按照官方提供的腳手架安裝的，出現各類坑，建立好了項目，啓動項目，各類報錯，最後各類百度，沒果。

後來選擇了EXPO，可真香。

」

官方提供 腳手架

1. 全局安裝腳手架
npm uninstall -g react-native-cli
2. 建立新項目
react-native init  ProjectName
3. yarn start
複製代碼

安裝 EXPO 腳手架

什麼是EXPO

★

Expo是通用React應用程序的框架和平臺。它是圍繞React Native和本機平臺構建的一組工具和服務，可幫助您從同一JavaScript / TypeScript代碼庫在iOS，Android和Web應用程序上開發，構建，部署和快速迭代。

」

安裝腳手架

1. 全局安裝 EXPO
 推薦用 yarn 安裝// 
 npm install --global expo-cli
（當時用npm，安裝了半個小時，也沒安裝完......😭）
 2. 建立項目 expo init my-project  複製代碼

EXPO 提供了 很方便開發便捷

★

從項目的開發 到 最終的上線， 都很輕鬆。

當你想打包你的App 成APK 文件：

​ 你能夠是使用EXPO 提供的 指令： expo build:android

打包的時候，會須要EXPO的帳戶， 由於它會發布到你EXPO帳戶下，生成APK 文件 ，發佈到應用商城，須要證書或者資料， 它會給你生成一個， 徹底不用咱們操心，只關注編碼。

」

光說不練 純耍流氓，下面爲EXPO 操做演示

建立項目

下載依賴會須要一段時間

EXPO 項目介紹

啓動項目 yarn start

★

啓動成功後，它會開啓一個服務，會自動打開一個網頁，在這個網頁中，你只須要把你的 手機模擬器 或者 真機 連着電腦， 而後 點擊 Run on Android device 就能夠運行在手機上了。

是否是很輕鬆哈，使用官方提供的，你的本身配置，查找模擬器。😝

」

​

React Native 支持熱更新

★

這樣很方便咱們開發APP 中調試， 數據改變， 視圖同時改變。

」

打包項目

★

因爲我是Windows 環境，在這裏就只介紹 如何打包 Android APK 文件了。

IOS 打包 去官方讀文檔也能夠，文檔可能對國人不太友好，純英文，翻譯工具能夠幫到咱們。

」

打包成功，它會提供一個連接，去這個連接你就能夠下載打包後的APK 文件

下載APK

顯示效果

到此該結束了

★

本章介紹了，如何配置React Native 環境， 以及EXPO 神器如何使用，從 0 到 打包成 APK 文件流程。

中間我踩了不少坑，寫文章記錄下來，別的朋友就能夠減小踩坑的時間，專一業務開發方面，從而開發出優質的APP 應用。

」

祝你們，5.1 快樂

原創不易，以爲不錯分享點贊👍

關注公衆號，能夠加入'前端自學交流羣'👍