windows下react-native搭建環境

来源:http://www.cnblogs.com/yuying0527/archive/2017/07/24/7230203.html
-Advertisement-
Play Games

第一步:安裝Java 1.下載JDK,選擇適應自己的機型;官網地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.配置環境,問度娘:http://jingyan.baidu. ...


第一步:安裝Java 1.下載JDK,選擇適應自己的機型;官網地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.配置環境,問度娘:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html   第二步:下載安裝Android SDK 1.直接下載SDK Tools,然後通過SDKManager安裝react-native運行所需要的環境,註意選擇x64還是x86。 官網下載地址:https://developer.android.com/sdk/installing/index.html 國內下載地址:http://androiddevtools.cn/ 2.設置SDK:點擊右下角configure,打開 SDK Manager,我們需要安裝以下項目的最新版本: Tools/Android SDK Tools Tools/Android SDK Platform-tools Tools/Android SDK Build-tools Android 6.0 (API 23)/SDK Platform Extras/Android Support Library Extras/Local Maven repository for Support Libraries  

 

第三步:安裝node.js,git   第四步:安裝react-native命令行工具 1.打開命令視窗,輸入 npm install -g react-native-cli   第五步:創建react-native項目 新建一個文件夾,利用命令控制視窗進入文件夾初始化一個項目:react-native init AwesomeProject 如果你網路不怎麼樣,這裡會耗時相當相當久,甚至經常因為網路的原因下載項目失敗!所以react-native中文官網推薦你使用淘寶鏡像:$ npm config set registry https://registry.npm.taobao.org   第六步:運行packager: 1. cd AwesomeProject 2. npm start 顯示下圖表示成功   第七步: 連接設備或者模擬器 這裡推薦設備 再打開一個命令視窗,運行adb devices,如果正確配置了Android SDK環境變數,我們在docs命令控制行中運行應該可以看到下麵界面:    我們看到列表為空,是因為我們還未連接任何設備。我通過USB接入手機,再運行看看: 

我們可以看到設備號為42048543c...表示已經連接成功。

有時候我這會出現如下問題:

 應該是埠號被占用,我這裡總被360手機助手占用,一般我都連接成功後退出360手機助手,然後重新npm start之後重覆第七步。如若adb安裝成功,還是這裡出現這個問題的話解決不了就百度一下或者嘗試重新插手機。

  第八步:編譯運行Android: AwesomeProject目錄下運行$ react-native run-android,就會構建工程並自動安裝到你的模擬器或者設備,(如果關閉了npm start運行視窗就會同時啟動用於實現動態代碼載入的Node服務)。 第一次運行的時候,會下載gradle文件,該文件下載時間太過於漫長,解決辦法如下: 1.打開http://androiddevtools.cn/ 找到gradle-2.4-all.zip這個文件的下載地址:http://pan.baidu.com/s/1c0dcgfe, 將它下載到本地。 2.用編譯器打開AwesomeProject文件夾中的android文件中的gradle下的wrapper找到gradle-wrapper.properties文件,將其中的distributionUrl=https://services.gradle.org/distributions/gradle-2.4-all.zip 改為distributionUrl=file:///E:/AwesomeProject/gradle-2.4-all.zip,讓它本地離線下載。其中E:/AwesomeProject/gradle-2.4-all.zip為你下載gradle後所保存的地址。 graddle構建過程中會下載很多jar包,如果出現下載失敗,多重試幾次。  3.當下在完grandle後一定會報錯,如圖:

 

因為本文所用的demo文件中很多版本號過於舊,我們需要改成自己下載的版本號,具體方法如下所示: a.查看目錄,沒有23.0.2這個版本

 

找到AwesomeProject下的android下app修改他的build.gradle文件:   將 buildToolsVersion改成自己下載的版本號: b.把Android項目下的build.gradle中 改成classpath 'com.android.tools.build:gradle:1.2.3'; 然後將測試的手機中所有安全軟體都關閉,再次運行react-native run-android: 出現上圖表示成功。   第九步:運行程式 一般會出現如圖表示成功

 

  當出現程式白屏時,找到並開啟AwesomeProject的懸浮窗許可權。 設置 --> 其他應用管理 --> 已下載 --> 點擊AwesomeProject --> 許可權管理 --> 顯示懸浮窗 --> 允許 。 如果看到一個大紅色的報錯,這個報錯是因為app獲取不到packager生成的jsbundle文件,我們打開AwesomeProject,搖晃一下設備,就會看到下麵的界面:

 

點擊Reload JS成功的話就可以看到我們期待已久的welcome to React Native!   接下來就可在index.android.js或者index.ios.js文件中進行編輯。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 背景 目前團隊中新的 Web 項目基本都採用了 Vue 或 React ,加上 RN,這些都屬於比較重量級的框架,然而對於小型 Web 頁面,又顯得過大。早期的一些項目則使用了較原始的 HTML 頁面構建技術,但業務邏輯基本無法復用。 近半年做過幾個小型 Web 頁面,在不斷學習前端知識的同時,也在 ...
  • 前言 最近做項目的時候遇到了一些跨域問題,雖然網上對於跨域的問題分享還挺多的。不過當我實際遇到的時候還是有點懵。趁項目剛上線完,寫篇文章總結下。 造成跨域的兩種策略 瀏覽器的同源策略會導致跨域,這裡同源策略又分為以下兩種 DOM同源策略:禁止對不同源頁面DOM進行操作。這裡主要場景是iframe跨域 ...
  • jQuery UI是以jQuery為基礎的代碼庫。包含底層用戶交互、動畫、特效、和可更換主題的可視控制項。我們可以直接用它來構建具有很好交互性的web應用程式。 jQueryUI網址:http://jqueryui.com 常用的jqueryUI插件:Draggable 1、設置數值的滑動條 1 <! ...
  • gulp前端自動化常用插件彙總 ...
  • 具體代碼如下: ...
  • 常用包 框架: yarn add express 資料庫鏈接: yarn add sequelize yarn add mysql2 處理 favicon: yarn add "serve favicon" 紀錄日誌: yarn add "morgan" 生成文檔: yarn add dev "ap ...
  • 恢復內容開始 純html5+css+js實現噠 運行效果: 實現功能: 按鍵W,S,A,D,J分別控制坦克上下左右移動和發射子彈,由於水平有限,還在努力中~目前只實現了對自己坦克行為的控制,只畫了一顆子彈,記錄這顆子彈的坐標軌跡 源碼: 源碼在這裡啦~,只用了兩個文件,眾多不足,還望指出謝謝~~~~ ...
  • 1.首先確定發佈app的所必要選中或者切換的弄好 比如切換環境到 由測試環境切換到正式環境。 2.打發佈包 首先選中Product 然後選中Archive。 3.等待編譯。 4.打包成功 會進入到下麵這個界面。 5.我一般都是選中export 打一個發佈包 然後用application loader ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...