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