React Native環境配置之Windows版本搭建

来源:http://www.cnblogs.com/guanmanman/archive/2016/12/10/6158484.html
-Advertisement-
Play Games

學習H5 Web開發怎麼和安卓原生開發共存呢,React Native直接解決了這個問題:在運用H5開發的同時,還可以有效調用android原生態開發,直接兩者兼具,既保留了android原生開發也運用了H5 web開發。成本與效率共存。 ...


接近年底了,回想這一年都做了啥,學習了啥,然後突然發現,這一年買了不少書,看是看了,就沒有完整看完的。悲催。
然後,最近項目也不是很緊了,所以抽空學習了H5。自學啃書還是很無趣的,雖然Head First Html5 Programming(中文版)這本書講的很有意思,但是學習了大半本就想自己動手練練,所以得找個框架玩玩。
另外之前也就聽說過React Native很火,火了半個地球了,而且它號稱“Learn once,write anywhere”這句話在移動開發猿眼裡意味著什麼呢,我不說你估計也知道:“跨平臺”。像我這種安卓猿寫出來的代碼能跑在IOS上,相信沒有比這更開心的了。
而且,我在學習H5,那學習H5 Web開發怎麼和我的安卓開發共存呢,React Native直接解決了我的問題:在運用H5開發的同時,還可以有效調用android原生態開發,直接兩者兼具,既保留了android原生開發也運用了H5 web開發,perfect。所以框架也先不找了,直接毫不猶豫地投入到了React Native的學習當中。然後接下來的配置就讓我陷入了苦逼的憤懣中,所以在配置好之後立馬的記錄下來,一是記錄自己的學習經過,二是,給遇到同樣麻煩的同學提供一些借鑒。

因為我是在WIN10上搭建的,所以以此為版。

  • 1、安裝JDK

這個做java、android開發的都已經安裝好了,沒安裝的可以自行安裝,這裡提示註意的地方:一定一定要在系統變數中配置JAVA_HOME: D:\guanmanman\Jdk8\jdk8,值是你的JDK安裝目錄,,請記得。

  • 2、安裝SDK

因為我是搞android開發的,所以這裡是安裝SDK,這裡需要:
① 環境變數ANDROID_HOME:XXX
例 如:(ANDROID_HOME: D:\guanmanman\androidStudio\sdk)
② 環境變數PATH例如:
例如:(PATH:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

  • 3、下載SDK

React Native使用的是android版本是23.0.1,只支持這一個sdk版本,所以你必須先下載他的源碼及工具,不然後面後報錯,我就遇到了

這裡寫圖片描述

如果你要是用的google 模擬器還要下載
這裡寫圖片描述

ok 上面的基礎東西下載好安裝完,我們接下來就正式開始我們的React Native所需要工具下載和安裝了:

1:node.js的下載和安裝

下載地址:https://nodejs.org/en/,本人用的版本是, V6.9.2

安裝則是選擇好目錄傻瓜式的安裝即可。

2:Git的下載和安裝

下載地址:https://git-for-windows.github.io/ 直接download即可

安裝註意選擇支持windows Command 和 windows ' default console window

這裡寫圖片描述

這裡寫圖片描述

ok 安裝完上面兩個工具我們就能使用npm命令了,可以看下:
這裡寫圖片描述

3:配置國內鏡像

因為需要下載東西而遭到國內禁止,你懂得,所以得配置鏡像,方便我們下載:

npm config set registry https://registry.npm.taobao.orgnpm
npm config set disturl https://npm.taobao.org/dist

命令行執行這兩段配置命令。

4:下載 react-native-cli

這是react-native命令執行所必須不可缺少的文件。

執行命令:npm install -g react-native-cli

這個根據網路快慢,下載時間有所不同。

完成react-native-cli的下載,到這裡我們就完成了所有的基礎配置了,也就是說前期工作已做完了,下麵就可以創建項目進行開發了,是不是很開心,有點迫不及待呢,走著看吧,偷笑。

創建項目工程:

1:創建一個FirstRNProject工程

開始之前先創建一個專門用於保存React-Native工程項目的工作區:React-native_workSpace

然後執行命令:react-native init FirstRNProject 回車,init 代表創建一個工程。

這裡寫圖片描述

當現實這個界面的時候就代表我們的項目已創建完成,可以到你的工作區間去查看。

2:開啟FirstRNProject工程

工程項目已建立完畢,然後我們進入這個工程中,並執行輸入react-native start,開啟這個工程

這裡寫圖片描述

3:檢查FirstRNProject項目是否啟動成功

在瀏覽器中訪問http://localhost:8081/index.android.bundle?platform=android

這裡寫圖片描述

當顯示如上的腳本就代表已成功開啟。

4:運行FirstRNProject項目

進入項目目錄,輸入react-native run-android 回車,

這裡寫圖片描述

執行命令後會去下載相關的資源,這個過程還是蠻長的,耐心等待吧。

然後下載完後就會安裝工程在手機上了,你是否覺得已完成了呢,我要告訴你想多了,來看看我們碰到了那些坑吧。

遇坑則填:

1:sdk工具包

這裡寫圖片描述

從標出來的地方可以看出,需要SDK工具版本是23.0.1,這個簡單,開啟androidstudio SDK Manager 進行下載吧,這也是在基礎配置時我強調的一定要下載這個版本的原因。

下載完在繼續運行項目 react-native run-android

2:JAVA_HOME的配置

這裡寫圖片描述

出現這個問題是因為我的環境變數path中直接用的是jdk的安裝目錄並沒有配置JAVA_HOME,這裡直接添加一個JAVA_HOME的配置,在填入jdk的安裝目錄即可。

3 :Unable to upload some APKs異常

這個問題是在5.0以上的真機中會出現 Unable to upload some APKs的問題,這時候我們只需要把項目工程中的android目錄中的build.gradle文件中的

dependencies {
        classpath 'com.android.tools.build:gradle:1.3.1'
    }

classpath 中的1.3.1給為1.2.3即可,還要設置android/gradle/wrapper/gradle-wrapper.properties文件的jar包

把distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip改為

distributionUrl=https\://services.gradle.org/distributions/gradle-2.2-all.zip

ok 改完再次執行項目:react-native run-android,它會重新下載zip包,又是N等。

在煎熬的等待中,終於下完了,進入真機或是模擬器中查看。

4 :can't find variable:異常

這個需要你配置下真機IP和埠號,上下多次搖晃手機,會出現一個菜單欄,點擊Dev Settings後,點擊Debug server host & port for device,設置IP和埠,埠號固定為8081,IP為你的主機ip地址。

ok,返回,再次上下搖晃手機,在菜單欄中,選擇Reload JS,是不是感覺OK了呢,你想多了。

5:SyntaxError異常

本以為到這裡就ok了,結果,運行一看,好吧,真不捨得我:

Strict mode does not allow function declarations in a lexically nested statement.

這裡寫圖片描述

這個異常卡了我兩天,如果你也遇到這個異常了,你就懂了我的無奈,因為這不是人為或是配置出了問題,你要是知道了答案肯定十分的震驚,那是因為:這個異常是 React Native 版本自帶的Bug,兩天的鬱悶到最後解決了還是一樣的無語。

這這裡感謝React Native7群 (115487854)里的 晴朗 大神,他一言就解決了我兩天的困惑。
“ react-native init 項目名 --version 0.38.0, 這是0.39的自身的問題,換0.38解決。 ”他這樣說道。

針對這個異常,下麵提供兩種解決方案:

方法一:在新建項目時,使用命令react-native init 項目名 --version 0.38.0

方法二:打開工程中node_modules\react-native\Libraries\Core\InitializeCore.js文件找到 112 行,更改function handleError(e, isFatal) 為 var handleError = function(e, isFatal)然後在工程中執行 npm start --reset-cache重新啟動

然後,就沒有然後了。

這裡寫圖片描述

以上就是最後,這個問題解決之後就正式的進入RN界面了。

OK,到這裡就講完了,我估計我所遇到的坑是比較多的了,希望你能少於點坑,尤其是新人剛學習,信心遭受10000點暴擊。

接下來就要正式的學習RN技術了,很期待,在學習中我也會時不時把自己的學習成果與大家分享,有興趣的同學一起努力吧。

更多資訊請關註微信平臺,有博客更新會及時通知。愛學習愛技術。
這裡寫圖片描述



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、獲取內聯樣式 在這種情況下,獲取和設置樣式只靠style屬性就可以,因為element.style屬性返回的是類似數組的一組樣式屬性及對應值,因此訪問具體樣式的時候可以採取兩種方式即“ele.style.屬性名稱”和“ele.style['屬性名稱']”。但是,要註意的是,針對css樣式里bac ...
  • 眼看就要期末了,我的專業課也迎來了第二次的期末作業 《網上購物系統》。雖然老師的意圖是在鍛煉我們後臺的能力,但是想著還是不利用網上的模板,準備自己寫,以來別人寫的靜態頁看不懂,再著可以鍛煉自己做網頁的能力。所以趁有點小進展就想分享自己的作業進展狀態。下麵是我頁面運行的截圖。 可能粘貼的圖片沒有任何的 ...
  • BFC 在上一篇文章中, "清除浮動方法解析" ,我們談及了一些使用css屬性解決浮動帶來的影響。但是在解決浮動帶來的影響的方法中,如果細心思考,會產生如下疑問: 為什麼 可以清除浮動帶來的影響? 能否用其他css屬性清除浮動帶來的影響? 種種的疑問,會讓你覺得CSS真的不容易精通,說精通過於高大上 ...
  • ...
  • layer至今仍作為layui的代表作,她的受眾廣泛並非偶然,而是這五年多的堅持,不斷完善和維護、不斷建設和提升社區服務,使得猿們紛紛自發傳播,乃至於成為今天的Layui最強勁的源動力。目前,layer已成為國內最多人使用的web彈層組件,GitHub自然Stars3000+,官網累計下載量達20w ...
  • OS Node.js提供了一些基本的底層操作系統的模塊 "OS" . API ...
  • 關於調試 當我們只專註於前端的時候,我們習慣性F12,這會給我們帶來安全與舒心的感覺。 但是當我們使用NodeJs來開發後臺的時候,我想噩夢來了。 但是也別泰國擔心,NodeJs的調試是很不方便!這是肯定的。 但是還好,我們有 "node inspector" 來幫助我們解決一部分的調試問題,但是對 ...
  • 秋招也算是正式結束了,現在整理一下筆記,當作鞏固一下知識,也希望這個對大家有幫助 http 緩存 和 cdn 緩存可以說是面試必問的問題,竟然是必問的問題,那就總結全面一點~ http緩存機制 秋招也算是正式結束了,現在整理一下筆記,當作鞏固一下知識,也希望這個對大家有幫助 http 緩存 和 cd ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...