《React Native高效開發》之 create-react-native-app
- 本文為 Marno 原創,轉載必須保留出處!
- 公眾號 aMarno,關注後回覆 RN 加入交流群
一、面臨問題
從某種程度上而言,目前為止 RN 只是給擁有 Mac 電腦的開發者提供了跨平臺開發的能力, 因為現在還不能使用 Windows 建立 iOS 的 RN 應用。還有一個比較普遍的問題是,有一些 iOS 程式設計師不會配置 Android 的編譯環境,而一些 Android 程式設計師又搞不懂 XCode,至於其他沒接觸過移動開發的人來說,就更惱火了。有些人可能本來也只是想體驗一下,結果覺得配環境這麼麻煩就直接放棄了。
所以為了能讓更多人感受 RN 的魅力,早在幾個月前 react-community 就給出了一個不錯的解決方案,可以讓一個完全沒接觸過 RN 的人,從配環境開始5分鐘實現 Hello Wolrd
- 不用再去配置煩人的 iOS、Android 編譯環境
- 可以用 Windows 開發 iOS 版的 RN 應用。
二、解決方案
解決這個問題需要藉助兩個工具:。
第一個是電腦上用來建立 RN 應用的工具,第二個是手機上安裝的應用(Android、iOS 都有)。iOS 到 AppStore 搜 Expo 進行下載, Android 到 google play 下載,或者到 APKPure 下載,具體可以百度下。Expo 同時還提供了一個 XDE 的開發工具用來做 RN 開發,體驗了一下感覺不是很好用。如果感興趣可以到官網下載體驗(官網地址:
下面就正式開始介紹一下這兩個工具的使用,使用 CRNA 建立 RN 應用只是不用安裝 iOS 和 Android 的編譯環境了,但是 node 還是必須的,然後通過下面的 node 命令安裝 CRNA 這個工具。
$ npm install -g create-react-native-app
安裝好之後就不再使用 react-native init XXX
的命令來新建應用了,直接使用下面的命令進行建立並啟動。使用 CRNA 建立的專案,你在資料夾裡看不到 iOS 和 Android 工程目錄,它只包含了 JS 部分的程式碼。
$ create-react-native-app MarnoRN
$ cd my-app/
$ npm start
正常情況下,會如下圖一樣執行並建立好一個 RN 應用,我們通過 npm start
啟動該應用後,會生成一個二維碼。這樣的操作方式就感覺和微信小程式有些類似了。
接下來使用 Expo 掃描這個二維碼就可以開啟你編寫的 RN 應用了。並且只要在 Expo 中開啟過一次,就會在 App 中保留一個入口。
使用 Expo 我們可以很快速的將自己的 RN 應用和別人分享,只要把二維碼或者應用連結發給別人就行,不過前提是別人也同樣安裝了 Expo 。我們也可以把自己的 App 上傳到 Expo 中,讓更多的人搜尋就可以使用。上傳操作命令如下:
$ npm i -g exp
$ exp publish
通過 CRNA 這樣的方式,不僅完全跳過了配置 Android 和 iOS 編譯環境的步驟;還突破了硬體的限制,不管你的電腦是 windows 還是 mac ,也不用管你的手機是 iPhone 還是 Android,都可以進行所有平臺的程式碼編寫和真機測試 。並且在 Expo 中還可以搜尋別人上傳的應用(恩!感覺這套路和小程式是一樣樣的)。
但是如果最終你要打包 App 釋出到應用市場,那還是需要有 iOS 和 Android 編譯環境,要只是用來體驗一下,或者用於 RN 的學習,那這種方式應該是可以解決你的問題了,可以讓你更專注的進行學習 ,而不會因為覺得安裝編譯環境繁瑣就放棄了。當然 CRNA 還有一些其他功能,大家可以自行到 github 看原文文件。如果在使用過程中有什麼問題,可以直接給作者提 issue 哈。
這個只是 React Conf 2017 大會上一個比較短的內容,大會還介紹了一些其他的東西,比如 Mobx 和 Redux 的對比、 React VR 的使用、最新版 nuclide 的使用(感覺比之前好用了)等等,滿滿 2 天的會議,Youtube 上有 35 個相關的視訊,我上週末看了差不多有一半了,受益不少。如果感興趣的可以自行去觀看,請自備梯子,或者在我公眾號回覆 v p n 用我推薦的這個梯子也行。我經常到 youtube 看視訊就用這個,看 1080p 也不怎麼卡,哈哈~不過前提是你的網速要好!
相關推薦
《React Native高效開發》之 create-react-native-app
本文為 Marno 原創,轉載必須保留出處! 公眾號 aMarno,關注後回覆 RN 加入交流群 一、面臨問題 從某種程度上而言,目前為止 RN 只是給擁有 Mac 電腦的開發者提供了跨平臺開發的能力, 因為現在還不能使用
react.js 之 create-react-app 命令行工具系統講解
全局變量 document 是什麽 模板 有一種 cut process 函數定義 pan react.js 教程之 create-react-app 命令行工具系統講解 快速開始 npm install -g create-react-app creat
如何開發由Create-React-App 引導的應用(四)
lis 觀察者模式 with add emp chan 項目路徑 deploy 寫入 此文章是翻譯How to develop apps bootstrapped with Create React App 官方文檔 系列文章 如何開發由Create-React-Ap
Android原生(Native)C開發之五:zlib移植筆記
zlib(http://www.zlib.net/)是一套非常流行的且開源的壓縮、解壓縮庫,由Jean-loup Gailly與Mark Adler所開發,初版0.9版在1995年5月1日發表。zlib使用DEFLATE演演算法,最初是為libpng函式庫所寫的,後來普遍
iOS 高效開發之道
iOS_高效開發之道話不多說, 總結一下個人感覺有利於提高iOS開發效率的幾個小技巧。本文將從以下幾方面介紹:Xcode常用快捷鍵Xcode除錯技巧Objc常用程式碼片段Xcode外掛Mac工具1. Xcode常用快捷鍵導航快捷鍵command+1-8: 開啟 Pr
.Net 高效開發之不可錯過的實用工具
工欲善其事,必先利其器,沒有好的工具,怎麼能高效的開發出高質量的程式碼呢?本文為各ASP.NET 開發者介紹一些高效實用的工具,涉及SQL 管理,VS外掛,記憶體管理,診斷工具等,涉及開發過程的各個環
[React] Override webpack config for create-react-app without ejection
The default service worker that comes with create-react-app doesn't allow for very much configuration. We'll replace that default service worker in two way
第一個React專案——使用官方腳手架create-react-app搭建第一個React專案
準備工作 1,node js環境 一、下載create-react-app 1)使用命令列的方式進入目標資料夾(shift+右鍵,此處開啟powershell視窗)(win10) 2)輸入命令 npx create-react
Web前端—前端高效開發之“一鍵切圖”教程
作為一名Web前端人員,工作中難免都會要接觸切圖這一塊,那麼如何把圖快速切好且又不浪費時間呢?相信很多人切圖都是先把圖片放大再使用矩形工具或切片工具來切圖,這樣其實好麻煩且有時
Android高效開發之,Android6.0動態許可權的封裝
每次進行動態許可權註冊的時候,都要使用固定的流程 對該固定程式碼進行封裝,可以在所有介面Activity基類中進行動態許可權的申請。 子類Activity只需要構造一個LinkedList 傳入
Mac高效開發之iTerm2、Prezto和Solarized主題
本文首發於個人網站:Mac高效開發之iTerm2、Prezto和Solarized主題 工欲善其事必先利其器,作為開發,我追求極致的高效,因此會在很多細節上追求效率,例如:命令列視窗敲命令的時候,如果能善用快捷鍵,就可以在短時間內敲更多的命令;IDEA的快捷鍵如果用得熟,在同樣時間內,就可以產出更多的程式
iOS開發之常用資訊類App的分類展示與編輯的完整案例實現(Swift版)
上篇部落格我們聊了《》,今天的這篇部落格就在上篇部落格的基礎上做些東西。做一個完整的資訊類App中的分類展示、分類切換、分類編輯這一套東西。當然,主要我們還是使用靈活多變的CollectionView來實現。下方我們將會給出程式的執行效果,然後給出核心的程式碼實現,在文章的末尾我們會給出github上原始碼的
小程式開發之全域性邏輯層App.js及生命週期
小程式邏輯層 App Service 小程式開發框架的邏輯層使用 JavaScript 引擎為小程式提供開發者 JavaScript 程式碼的執行環境以及微信小程式的特有功能。 邏輯層將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。 開發者寫的所有程式碼最終將會打包成
iOS開發之模仿簡書App自定義TabBar詳解
先來看看效果圖吧 然後我們再來一步一步看看程式碼 1.首先頁面下面TabBar的Button需要自定義,把Button的文字放在圖片下面 //更換文字圖片的位置,最主要的就是實現以下兩個方法,重寫父類方法 //image ratio #de
【React Native開發】React Native控件之ProgressBarAndroid進度條解說(12)
ice 發現 來講 top 文章 func dev all ios 轉載請標明出處:http://blog.csdn.net/developer_jiangqq/article/details/50596367本文出自:【江清清的博客】(一)前言 【好消息】
ReactNative學習之:開發之圖標庫react-native-vector-icons
git con www http tps ati https ionic 今天 GitHub地址:https://github.com/oblador/react-native-vector-icons iOS 參考:http://www.jianshu.com/p/4
《移動Web前端高效開發實戰HTML 5 + CSS 3 + JavaScript Webpack + React Native + Vue.js + Node.js 》介紹推薦
移動網際網路的興起和快速普及,給前端開發人員帶來了新機遇。移動Web前端技術作為整個技術鏈條中重要的一環,卻亂象叢生。本書是一本梳理移動前端和Native客戶端技術體系的入門實戰書。 本書涵蓋了移動Web前端開發中的各個關鍵技術環節,共14章。分別從HTML 5、C
react-native開發之專案連線夜神模擬器步驟(window)
這裡是window為準, 因為mac電腦 夜神模擬器暫時沒有搖一搖功能 連線夜神模擬器 adb.exe connect 127.0.0.1:62001 返回 connected to 127.0.0.1:62001 說明 連線成功!!!! cmd 開啟命令編輯器 進入專案目錄 win
【React Native開發】React Native控制元件之Image元件講解與美團首頁頂部效果例項(10)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們一起來看一下Image元件的相關使用講解以及模仿實現一下美團首頁頂部分類的效果。具體環境搭建以及相關配置的請檢視之前
【React Native開發】React Native控制元件之TextInput元件講解與QQ登入介面實現(11)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們一起來看一下文字輸入框TextInput元件的相關使用講解以及模仿實現一下QQ登入介面的效果。具體環境搭建以及相關配置