1. 程式人生 > >快速建立React Native App

快速建立React Native App

告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家現可以看視訊學React Native了。

快速建立React Native App

檢視最新的React Native官方文件你會發現,在Getting Started章節下新新增一個Quick Start Tab頁。Quick Start是在v0.4.5版本新增的一種快速建立React Native App的方案,旨在為React Native開發者提供一種快捷的,無需配置任何工具,同時也無需安裝XCode與AndroidStudio就可以開發React Native App的一種方案。

本文向大家分享如何快速構建React Native App以及在使用快速構建方案中可能存在的一些問題及解決方案。

第一步:安裝create-react-native-app

create-react-native-app是React 社群孵化出來的一種無需構建配置就可以建立RN App的一個開源專案。

作為一個建立react native應用的腳手架工具,你可以通過如下命令完成安裝:

npm install -g create-react-native-app

接下來就可以通過create-react-native-app來建立APP了:

create-react-native-app aa
cd aa
npm start

npm-start.png

上述命令,會為你建立一個aa的RN專案。

create-react-native-app常用命令

  npm start
    啟動本地開發伺服器,這樣一來你就可以通過Expo掃碼將APP執行起來了。

  npm run ios
    將APP執行在iOS裝置上,僅僅Mac系統支援,且需要安裝Xcode。

  npm run android
    將APP執行在Android裝置上,需要Android構建工具。

  npm test
    執行測試用例。

執行React Native應用

想要將上述建立的aa執行起來,你需要下載安裝Exponent

為了方便大家下載使用,我已將Exponent上傳到網盤,供大家下載使用。

然後用Expo掃碼螢幕上的二維碼,aa就可以執行在Expo上了。

執行效果

提示:為了確保Expo App能夠正常訪問到你的PC,你需要確保你的手機和PC處於同一網段內或者他們能夠聯通。

編輯App

經過上述的步驟,快速開發React Native App的環境就已經搭建好了,小夥伴門是不是迫不及待的想修改一下APP來檢視執行效果了呢,接下來就可以編輯App.js來在Expo上檢視執行效果哦。

可能存在的問題及解決方案

ERROR: npm 5 is not supported yet

error-npm5-is-not-support-yet

問題分析:
在通過create-react-native-app命令建立一個React Native專案的時候,出現這個問題的原因是npm 5的一個bug所致@[email protected] known issue tracking

解決方法

將npm5降級到npm4,終端執行如下程式碼:

npm i [email protected] -g

然後在重新執行create-react-native-app即可。

如果大家對快速建立React Native App還有不明白的地方,可以在文章下方給我留言,我看到了後會及時回覆的哦。
另外也可以關注我的新浪微博@CrazyCodeBoy,或者關注我的Github來獲取更多有關React Native開發的技術乾貨

告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家現可以看視訊學React Native了。

如果,大家在開發原生模組中遇到問題可以在本文的下方進行留言,我看到了後會及時回覆的哦。
另外也可以關注我的新浪微博,或者關注我的Github來獲取更多有關React Native開發的技術乾貨

推薦學習:視訊教程《最新版React Native+Redux打造高質量上線App》