1. 程式人生 > >React Native學習筆記一之搭建開發環境

React Native學習筆記一之搭建開發環境

因為專案需要,今天開始正式學習React Native,先來搭建個開發環境

忐忑的心情

因為專案比較急,而且客戶要求使用React Native開發,只能先學點基礎然後在專案中使用的時候,邊做邊學了,在保證工期的前提下,進擊的程式猿, go,go,go!!

這裡寫圖片描述

環境

開始,相關概念

1、PowerShell

PowerShell是微軟公司為 Windows 環境所開發的殼程式及指令碼語言技術,採用的是命令列介面。

—>百科介紹<—

2、包管理工具

包管理工具,可以讓我們用幾個簡單的命令去安裝,升級,還有刪除軟體,並且它會自動給我們解決軟體之間的依賴的問題。
Windows 使用者可以使用 Chocolatey 這個包管理工具,Mac 使用者可以使用 Homebrew

安裝 Chocolatey

安裝 Chocolatey,只需要在 Windows 系統的命令列工具下面去執行一行命令,這個命令列工具可以是 命令提示符(cmd),也可以是 Powershell ,只需要在其中的一個上面安裝 Chocolatey 就可以了。你要用管理員的身份去執行命令列工具,不然會遇到許可權問題。

以管理員身份開啟命令列工具

Windows 7:點選 開始 選單,在搜尋框裡輸入 cmd 或者 powershell ,找到以後,用滑鼠右鍵點選它們,選擇 以管理員身份執行。

Windows 8 + :使用快捷鍵 win + Q ,搜尋 cmd 或者 powershell ,然後右鍵點選它們,在視窗下面,選擇 以管理員身份執行。

在 命令提示符 上安裝 Chocolatey

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

在 Powershell 上安裝 Chocolatey

iex ((new-object net.webclient).DownloadString
('https://chocolatey.org/install.ps1'))

提示:如果是在 Powershell 下面安裝 Chocolatey 之前,先修改一下 Powershell 的執行策略,不然會出現 “此係統中禁止執行指令碼” 這樣的錯誤,解決的方法是執行下面的命令,意思就是把執行的策略設定成不限制:

Set-ExecutionPolicy unrestricted

測試

在命令列工具的下面,輸入:

choco -help

如果出現一些有用的幫助資訊,比如 Chocolatey 的版本號,安裝到的目錄,相關的命令,還有示例等等,這就說明我們已經可以在系統上使用 Chocolatey 了。

這裡寫圖片描述

這裡寫圖片描述

3、安裝Python 2

開啟命令提示符視窗,使用Chocolatey來安裝Python 2。輸入命令

choco install python2

安裝過程
這裡寫圖片描述

安裝成功
這裡寫圖片描述

4、安裝Node

開啟命令提示符視窗,使用Chocolatey來安裝NodeJS

choco install nodejs.install

安裝成功
這裡寫圖片描述

安裝完node後建議設定npm映象以加速後面的過程(或使用科學上網工具)。注意:不要使用cnpm!cnpm安裝的模組路徑比較奇怪,packager不能正常識別!

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

Yarn、React Native的命令列工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模組的下載。React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務(packager)等任務。


npm install -g yarn react-native-cli

安裝完yarn後同理也要設定映象源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安裝完yarn之後就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install –save 某第三方庫名。

5、安裝android studio

安裝AS,其實之前開發的時候肯定是安裝過的,這裡就不說了,包括環境變數的設定等等,如果作為一個android程式設計師,自己的開發環境都不會配置的話,你真的——可以百度嘛。
需要提一下的是有可能之前做原生開發的時候,並沒有安裝或下載RN開發需要的一些工具或庫,這個可以看RN中文網看看需要什麼,然後在AS中去安裝即可,我這邊的有:

SDK Platforms

Google APIs Intel x86 Atom System Image

Google APIs Intel x86 Atom_64 System Image

SDK Manager中去勾選上下載即可

這裡寫圖片描述

6、開啟Gradle Daemon

開啟Gradle Daemon可以極大地提升java程式碼的增量編譯速度。

官方文件中的開啟的介紹方法是在window的命令列中輸入如下命令

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")

這個命令的含義就是,在使用者目錄下,找到.gradel檔案,沒有就建立一個,在這個資料夾下建立一個檔案gradle.properties,在這個檔案中新增內容org.gradle.daemon=true

7、關於模擬器的選擇

我之前有一般都是使用真機除錯的,不過有時候也會想用模擬器(如果模擬器的啟動速度和記憶體佔用情況較好的情況下),Genymotion是我之前用過的, 而且效果不錯,所以我就繼續Genymotion了,至於它的安裝使用,這裡就不寫了,可以參考這篇文章或者自行百度。

8、來測試一波RN的專案

在window命令列中,進入你的工作目錄,然後輸入如下命令

1建立專案

react-native init RNTest

注意專案RNTest的建立路徑,我可不想把專案建在C盤

這裡寫圖片描述

這裡寫圖片描述

2執行packager

react-native start

這裡寫圖片描述

3**保持packager開啟,另外開啟一個命令列視窗**,然後進入工程目錄,執行專案

cd RNTest
react-native run-android

如果apk安裝執行出現報錯,請檢查上文中安裝SDK的環節裡所有依賴是否都已裝全,platform-tools是否已經設到了PATH環境變數中,執行adb devices能否看到裝置。

如果安裝成功,應該能看到APP紅屏報錯,這是正常的,我們還需要讓app能夠正確訪問pc端的packager服務。

這裡寫圖片描述

搖晃裝置或按Menu鍵(Bluestacks模擬器按鍵盤上的選單鍵,通常在右Ctrl的左邊 或者左Windows鍵旁邊),可以開啟除錯選單,點選Dev Settings,選Debug server host for device,輸入你的正在執行packager的那臺電腦的區域網IP加:8081(同時要保證手機和電腦在同一網段,且沒有防火牆阻攔),再按back鍵返回,再按Menu鍵,在除錯選單中選擇Reload JS,就應該可以看到執行的結果了。

如果真實裝置白屏但沒有彈出任何報錯,可以在安全中心裡看看是不是應用的“懸浮窗”的許可權被禁止了。

我將電腦的防火牆關閉之後,內容就顯示出來了

這裡寫圖片描述

9、安裝時異常處理

在安裝過程中,我自己的電腦上是很順利的,但是在公司的電腦上就出現了問題(可能是公司電腦軟體比較老的原因),在安裝的python2的過程中提示

[00:01:54] Failures
[00:01:54]  - python2 (exited 1603) - Error while running 'C:\ProgramData\chocolatey\lib\python3\tools\chocolateyInstall.ps1'.
[00:01:54]  See log for details.

其實這是你的電腦已經安裝了python2 了,所以安裝失敗了,檢驗自己的電腦是不是安裝了python2,只需要在命令列輸入python即可,如果安裝了就會python的命令列,沒有就表示還沒有安裝,通過彈出python命令列我們可以看出python的安裝路徑,比如:
這裡寫圖片描述

ok,學習筆記一之搭建開發環境就完成了,後面就可以開始寫“Hello World”了!!

相關推薦

React Native學習筆記搭建開發環境

因為專案需要,今天開始正式學習React Native,先來搭建個開發環境 忐忑的心情 因為專案比較急,而且客戶要求使用React Native開發,只能先學點基礎然後在專案中使用的時候,邊做邊學了,在保證工期的前提下,進擊的程式猿, go,go,go!

Scrapy爬蟲學習筆記 - windows下搭建開發環境1

ima 搭建開發環境 環境 navicat win pyc arm bsp mysql 一、pycharm的安裝和簡單使用 二、mysql和navicat的安裝和使用 三、wi

xlwings文件學習--(搭建開發環境

0.開發環境Anaconda3-5.1.0-Windows-x86_64pycharm 2018.1.31.建立專案開啟pycharm,file→new project如下圖操作①選擇scientific專案型別②在location處為專案修改名字為xlwing點選creat

Angular6學習筆記1:搭建開發環境

搭建angular開發環境  a.安裝node.js  確認安裝結果 : 開啟cmd或者terminal Last login: Thu Aug  2 13:48:04 on ttys000 bogon:~ wjy$ node -v v8.9.1 bogon:

React-native with vscode on Mac 搭建開發環境

這時候你需要參考https://blog.csdn.net/young_emily/article/details/79005728 如果之前你沒有開發過android類專案,或者本地沒有裝Andr

Flutter學習)——搭建開發環境(Windows)

久聞 Flutter 大名,今天終於有時間體驗一下了 ٩(๑>◡<๑)۶  官網:https://flutter.dev/ 中文官網:https://flutterchina.club/ 一、下載Flutter SDK 1、下載 ①官網下載:https://flutt

React-Native 學習筆記-Android開發平臺-開發環境搭建

環境變量 最新版 下載 and 系統 系統環境變量 新版本 開發環境 studio 詳細步驟請查看官網對應文檔,BUT,有些註意事項請註意! 1,優先安裝Node.js,因為後面可以使用npm安裝軟件, 2,註意不要使用CNPM!!!!!!!!! 3,Android

React Native學習筆記 -- 開發環境搭建

ebo 安裝完成 原因 包管理工具 chown iss 運行 遇到 命令 工欲善其事,必先利其器。這次主要介紹mac osx下React Native的開發環境的搭建。 homebrew mac上的包管理工具,用於安裝nodejs和其他一些工具軟件,在terminal輸入下

[基礎篇]ESP8266-NonOS學習筆記()開發環境搭建

上篇文章我們瞭解了ESP8266到底是個什麼“東西”,瞭解了ESP8266在這個萬物互聯時代有哪些優勢,那我們不能光是瞭解,我們還需要去深入的學習一下,爭做物聯網時代的弄潮兒~繼往開來第二篇,本篇文章主要介紹一下幾種常見的ESP8266開發方式,感覺現在不管是學習硬體開發還是軟體開發,第一節課都是先學習一下開

React Native學習筆記)Mac OS X下React Native環境搭建

本文介紹Mac OS X系統下的React Native環境搭建過程。 1.環境要求: 1) Mac OS X作業系統 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安裝過程 1) N

React Native學習筆記2:Android環境搭建

背景 各位童鞋有木有感覺官方文件很坑啊,根據官網的描述,首先在chocolate就直接卡死了,VPN沒什麼卵用,於是逐個去官網下載,直到昨天才發現不用VPN也可以下!公司是windows環境,這裡就先用windows搭建。 因為本身是移動開發者,所以

React Native 學習筆記十三(原生模組Toast)

 在學習官網上的Toast 的過程中 出現很多的坑  廢話就不說了 官網上都有 官網講解 實現思路 : 我們之前已經將react-native 嵌入原生了 那麼 我們就在之前的基礎上進行修改就好了    建立ToastUtils.java 繼承ReactContextBas

React-Native學習筆記:導航器Navigator實現頁面間跳轉

Navigator用來實現不同頁面的切換,想設定Navigator,必須確定一個或多個呼叫routes物件,去定義每個場景。 還可以利用renderScene方法,導航欄可以根據指定的路由來渲染場景。

React Native學習筆記--向原生應用中整合RN頁面

React Native學習筆記之–向原生應用中整合RN頁面 根據在官方文件的學習要向已有的原生專案中新增RN元件最重要的就是以下幾步: 1.Understand what React Native components you want to in

React Native 搭建開發環境(MacOS使用者)

必需軟體 Homebrew Homebrew, Mac系統的包管理器,用於安裝NodeJS和一些其他必需的工具軟體。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/

React Native 學習筆記)--init 專案 和 執行專案

宣告:此篇blog是在Windows環境下開發Android專案的學習筆記,最近也是在網上翻找資料發現,網上的資源基本上都是Mac環境下的,而且大部分的資料都是關於React Native + Web / Service 的,關於android的學習資源不多,因此也就想通過

React Native學習筆記--ListView和RefreshControl實現下拉重新整理

React Native學習筆記之–ListView和RefreshControl實現下拉重新整理 今天利用React Native中的ListView來實現原生開發中的UITableView(Android中就叫ListView)的介面效果。 資料數利用Ch

React Native學習筆記--元件之間資料的傳遞和跳轉

React Native學習筆記之–元件之間資料的傳遞和跳轉 自定義屬性的定義方式和傳遞 假定元件ComponentA中的自定義屬性為 static props = { tit

php 學習筆記搭建開發環境(mac版)

Mac 系統預設集成了很多開發工具,其中就包括 php 所需要的一些軟體工具. 下面我們將搭建最簡單的 php 開發環境,每一步都會驗證上一步的操作結構,請一步一步跟我一起搭建吧! web 伺服器之 apache apache 是一款 web 伺服器,用於執行 php 檔案,除了 apache 外也可以是 n

Scala學習筆記基礎語法,條件控制,循環控制,函數,數組,集合

new 增強 指定位置 因此 手動 tex class break 減少 前言:Scala的安裝教程:http://www.cnblogs.com/biehongli/p/8065679.html 1:Scala之基礎語法學習筆記: 1:聲明val變量:可以使用va