ReactNative開發環境

此內容根據徐贏老師的文檔整理后寫處

原版地址:https://tuomaxu.gitbooks.io/reactnative/content/

?

?

ReactNative是跨平開發的解決方案,在開發平臺的選擇上,mac平臺和win平臺都可以。

所需要工具如下:

1,Nodejs環境

2,create-react-native-app

3,Expo App

4,iPhone和安卓手機,或安卓手機模擬器(推薦使用夜神模擬器)

以上工具均有mac和win平臺的安裝包。

筆者使用的是mac平臺做開發,所有下面演示都以mac平臺進行。

?

?

安裝Nodejs環境

1,進入http://nodejs.cnnodejs中文網,下載與自身環境相一致的nodejs安裝包

2,安裝包下載之后,雙擊進行安裝

win平臺的同學注意,安裝過程中要關閉殺毒軟件和各種安全工具

3,安裝完成之后,打開命令行工具,檢查是否安裝成功,執行如下命令:

$ node -v

該命令執行結果為當前node版本,筆者當前版本為:

v6.9.1

4,檢查NPM是否安裝成功,

npm 是Node包管理工具,之后需要使用它來安裝其他node程序包

在在命令行中輸入如下命令:

$ npm -v

該命令執行結果為:

4.5.0

?

?

安裝Yarn

Yarn是Facebook出品的一個依賴包管理工具,起作用和npm一樣。但Yarn具有更多好用的特性:

  • Yarn 會緩存它下載的每個包,所以不需要重復下載。它還能并行化操作以最大化資源利用率,所以安裝速度之快前所未有

  • Yarn 在每個安裝包的代碼執行前使用校驗碼驗證包的完整性。

  • Yarn 使用一個格式詳盡但簡潔的 lockfile 和一個精確的算法來安裝,能夠保證在一個系統上的運行的安裝過程也會以同樣的方式運行在其他系統上

  • 網絡適應單個請求失敗不會導致安裝失敗,請求失敗時會重試。

安裝yarn

訪問Yarn官網,下載響應平臺的安裝包,進行安裝

使用Yarn

安裝好之后,其他工具會自動使用Yarn進行加速。

?

安裝create-react-native-app命令行工具

create-react-native-app是一個綜合創建ReactNative工程,并且不需要配置的工具,它極大的簡化了入門開發的流程。具體的內容,大家可以進入其github.com的主頁進行瀏覽。

安裝create-react-native-app需要使用npm進行,在任意目錄下,輸入如下命令,便可以在該目錄下創建一個ReactNative工程。

$ npm install -g create-react-native-app

安裝成功之后,會展示安裝路徑。如安裝不成功,請檢查網絡,重新安裝。

?

創建ReactNative工程

ReactNative工程的模板需要通過create-react-native-app工具進行創建。創建方法如下:

1,通過命令行進入存放ReactNative工程的文件夾。

2,在該文件夾下執行如下命令:

$ create-react-native-app myapp

myapp為工程名,可以更換為其他字符,但必須小寫

安裝過程需要1-5分鐘不等,如想提升安裝速度,可以安裝yarn,詳情見yarn官網

下面為筆者安裝成功截圖:

筆者使用了yarn進行提速,所有命令中顯示為yarn

?

?

運行預覽工程

1,工程創建完成之后,便可以啟動工程,開始開發和調試。

啟動工程,首先要使用命令行工具進入工程更目錄,然后運行如下指令

$ npm start

工程 啟動之后,會生成一個二維碼和一個本地鏈接,通過此此二維碼或本地鏈接,便可預覽工程運行效果。

2,啟動工程之后,需要在手機端安裝Expo App,使用Expo App對所開發的ReactNative App進行預覽運行。

安裝ExpoApp的方法如下:

iOS平臺:在AppStore中搜索Expo client,如圖

Android平臺下,訪問此鏈接:http://expo.io/--/api/v2/versions/download-android-apk?下載安裝包并安裝,安裝過程中需要給此App全部權限。

3,Expo App在手機端安裝完成之后,打開ExpoApp,通過其掃描二維碼的功能,掃描生成的二維碼,便可以在App內預覽開發中的App工程

4,新建工程的運行效果為:

轉載于:https://www.cnblogs.com/sunny-pei666/p/7235989.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/371632.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/371632.shtml
英文地址,請注明出處:http://en.pswp.cn/news/371632.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python自動化開發 - 字符串, 列表, 元組, 字典和和文件操作

一、字符串特性:字符串本身不可修改,除非字符串變量重新賦值。Python3中所有字符串都是Unicode字符串,支持中文。 >>> name "Jonathan" >>> name "Jonathan" "Ni" >>>print(na…

shiro java配置,InI 配置 - 跟我學 Apache Shiro_教程_Java開發社區

INI 配置之前章節我們已經接觸過一些 INI 配置規則了,如果大家使用過如 Spring 之類的 IoC/DI 容器的話,Shiro 提供的 INI 配置也是非常類似的,即可以理解為是一個 IoC/DI 容器,但是區別在于它從一個根對象 securityManager 開始。…

在Spring容器外部連接對象依賴項

有幾種有趣的方法可以設置在Spring容器外部實例化的對象的屬性和依賴關系。 用例首先,為什么我們需要在Spring容器之外進行依賴注入–我知道三個用例,其中我實例化了Spring容器之外的對象并需要注入依賴。 首先考慮使用Spring TaskExecutor執行一系列任…

前端學習路線匯總

https://123.w3cschool.cn/plk2fihttps://www.w3cschool.cn/nodejs/nodejs-global-object.htmlnode.js轉載于:https://www.cnblogs.com/sxz2008/p/7238773.html

MediaInfo源代碼分析 1:整體結構

博客地址:http://blog.csdn.net/leixiaohua1020/article/details/12016231 MediaInfo源代碼分析系列文章列表: MediaInfo源代碼分析 1:整體結構MediaInfo源代碼分析 2:API函數MediaInfo源代碼分析 3:Open()函數MediaI…

測試RESTful服務的客戶端

開發使用RESTful Web API的應用程序可能意味著開發服務器和客戶端。 為服務器端編寫集成測試可以像使用Arquillian來啟動服務器一樣容易,并且可以通過REST確保測試服務是否按預期工作。 問題是如何測試客戶端。 在本文中,我們將了解如何使用模擬來測試客…

linux mysql誤刪,linux下MySQL安裝與刪除?(Ubuntu)

1、MySQL安裝A)MySQL安裝: sudo apt-get install mysql-server mysql-clientB)啟動/停止MySQL服務:MySQL 在安裝以后,MySQL 就已經啟動;如果需要手動啟動或停止則如下操作:手動啟動服務: sudo start mysql手…

對多態的理解例子

public class A {public String show(D obj) {return ("A and D");}public String show(A obj) {return ("A and A");} }class B extends A{public String show(B obj){ //重載return ("B and B");}public String show(A obj){ //重寫show(A obj…

【Java每日一題】20170120

20170119問題解析請點擊今日問題下方的“【Java每日一題】20170120”查看(問題解析在公眾號首發,公眾號ID:weknow619) package Jan2017; import java.util.Arrays; import java.util.List; public class Ques0120 { publ…

使用NoSQL實現實體服務–第2部分:合同優先

現在該開始使用NoSQL項目對SOA實體服務進行編碼了,并且正如我所承諾的,我將從Web服務的合同開始。 看一下本系列的第1部分 。 這種從Web服務合同定義開始的技術是面向服務的體系結構實現的“合同優先”方法的核心,并具有許多技術優勢&#xf…

php hugepage,【原創】解決Redis啟動報錯:Transparent Huge Pages (THP) support enabled in your kernel...

問題背景Redis啟動報錯:WARNING you have Transparent Huge Pages (THP) support enabled in your kernel.This will create latency and memory usage issues with Redis.To fix this issue run the command echo never > /sys/kernel/mm/transparent_hugepage/…

hibernate cascade的真正含義

hibernate cascade 是 OneToOne OneToMany ManyToOne ManyToMany等注解的屬性&#xff0c;表示級聯操作。 /*** (Optional) The operations that must be cascaded to* the target of the association.** <p> By default no operations are cascaded.*/CascadeType[] cas…

射線碰撞檢測

在我們的游戲開發過程中&#xff0c;有一個很重要的工作就是進行碰撞檢測。例如在射擊游戲中子彈是否擊中敵人&#xff0c;在RPG游戲中是否撿到裝備等等。在進行碰撞檢測時&#xff0c;我們最常用的工具就是射線&#xff0c;Unity 3D的物理引擎也為我們提供了射線類以及相關的函…

高級ZK:異步UI更新和后臺處理–第1部分

異步UI更新非常有用&#xff0c;因為它們通常可以提高響應性&#xff0c;可用性和用戶界面的總體感覺。 我將在這里重點介紹ZK框架&#xff0c;但是通常&#xff0c;相同的原理也適用于桌面UI&#xff08;Swing&#xff0c;SWT&#xff09;。 長時間運行的處理 有時&#xff0…

php注冊登錄遍寫入 遍驗證,自動注冊登錄驗證機制的php代碼

在phpwind站點后臺添加“廣告管家”(CNZZ的一款廣告投放的應用)的應用&#xff0c;整個“廣告管家”通過iframe載入&#xff0c;載入的具體內容根據不同站點顯示針對該站點的具體內容。出于意用性方面的考慮&#xff0c;需要以下二點&#xff1a;1、首次進入“廣告管家”頁面自…

轉載:tensorflow保存訓練后的模型

訓練完一個模型后&#xff0c;為了以后重復使用&#xff0c;通常我們需要對模型的結果進行保存。如果用Tensorflow去實現神經網絡&#xff0c;所要保存的就是神經網絡中的各項權重值。建議可以使用Saver類保存和加載模型的結果。 1、使用tf.train.Saver.save()方法保存模型 tf.…

php url傳遞變量,php – 在laravel中通過url傳遞變量

我是laravel的新手,我正在努力讓我的網址格式正確.格式為http://mysite/blog?category1 instead of http://mysite/blog/category1這些是我正在使用的文件,有沒有辦法將路由放入BlogControllerRoute.phpRoute::get(blog/{category}, function($category null){// get all the…

Apache Wicket:記住我的功能

在Web應用程序中&#xff0c;具有“記住我”功能非常普遍&#xff0c;該功能使用戶每次訪問我們的網站時都能自動登錄。 可以使用Spring Security來實現這種功能&#xff0c;但我認為將基于請求的身份驗證框架與基于組件的Web框架結合使用并不是最好的主意。 這兩個世界不能很好…

Ubuntu 安裝中文

系統環境&#xff1a; 1. 官網 http://pinyin.sogou.com/linux/ 下載安裝包。 2. 先運行 apt-get update 。 3. 再運行 apt-get -f install 。 4. 再運行 可能有的UBuntu系統自帶了。 5. 如果下載的搜狐輸入法安裝包的格式為 .deb 的&#xff0c; 運行 &#xff1a; dpk…

Eigen教程(10)

整理下Eigen庫的教程&#xff0c;參考&#xff1a;http://eigen.tuxfamily.org/dox/index.html 混淆 在Eigen中&#xff0c;當變量同時出現在左值和右值&#xff0c;賦值操作可能會帶來混淆問題。這一篇將解釋什么是混淆&#xff0c;什么時候是有害的&#xff0c;怎么使用做。 …