ReactNative進階（一）：ReactNative學習資料匯總

序

目前主流的移動跨平臺技術方案大體可以分為三類，

使用原生內置瀏覽器加載HTML5的Hybrid技術方案，采用此種方案的主要有Cordova、Ionic和微信小程序；

使用JavaScript語言進行開發，然后使用原生組件進行渲染，采用此方案的主要有React Native、Weex和輕快應用；

使用自帶的渲染引擎和自帶的原生組件來實現跨平臺，采用此種方案的主要是Flutter。

對于其他的瀏覽器方案，基本可以拋棄了，相比較React Native和Flutter，React Native和Flutter在應用開發上，效率差不多，不過要強調性能的話，還是Flutter為最佳選擇。

前言

在Vue開發一段時間后，發覺自己遇到了瓶頸期。需要學習新技能激活自己，選擇ReactNative開發移動端。

首先在環境搭建方面，自己時花費了2天的時間才將開發環境搭建好，有點費事費力，

設備選擇：

環境搭建過程中，居然還區分芯片，也是醉了。

常見問題

【MAC】打不開“XXXX Installer”，因為它來自身份不明的開發者。

MAC經常會安裝一些非AppStore的軟件會報安全提示，由于蘋果系統安全策略問題。隔空傳送接收的文件也會遇到上面的問題。

打不開“XXXX Installer”，因為它來自身份不明的開發者。

此時查看一下設置

mac 安裝homebrew出錯 Failed to connect to raw.githubusercontent.com port 443: Connection refused error

應用如下命令安裝homebrew時，

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

開始一直報錯Failed to connect to raw.githubusercontent.com port 443: Connection refused error: Error: 7，

原因：由于某些你懂的因素，導致GitHub的raw.githubusercontent.com域名解析被污染了。

解決辦法：通過查詢查詢真實IP，然后修改hosts解決此問題。

在https://www.ipaddress.com/查詢raw.githubusercontent.com的真實IP。

可知，該域名對應實際IP為4個，選擇其中一個IP進行hosts文件配置即可。

修改hosts

sudo vim /etc/hosts

添加如下內容：

185.199.111.133 raw.githubusercontent.com

Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.

在~/.zshrc (或 ~/.bashrc )文件中加入一句

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_91.jdk/Contents/Home

注：根據自己的實際JDK路徑修改上面的JDK路徑。

查看JDK位置的命令 /usr/libexec/java_home -V（在MacOS11.1，執行這個命令可能看到兩個路徑，一個是JDK的實際路徑，另一個是：/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home(這個是JRE路徑）。

下載最新版的JDK并安裝：

點擊下載

執行如下操作：

sudo cp /Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home/lib/tools.jar /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/lib

注：根據自己的實際JDK路徑修改上面的JDK路徑

查看環境變量配置

在項目終端安裝完brew之后，在另一項目下，輸入brew -v ,提示“command not found”，懷疑是由于環境變量為配置導致的，執行如下操作：

vim ~/.zshrc

在文檔中追加如下內容：

# 如果你不是通過Android Studio安裝的sdk，則其路徑可能不同，請自行確定清楚 export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=/opt/homebrew/bin/:$PATH export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

保存之后，執行source ~/.zshrc ，使環境變量實時生效。

Error: EMFILE: too many open files錯誤

構建項目時終端反復出現Error: EMFILE: too many open files錯誤，經排查是因為項目較大，發布過程中已經超過了mac默認的文件監聽上限，錯誤信息如下：

解決方式也比較簡單，只要修改文件最大上限即可。

首先打開終端，輸入launchctl limit并回車，可以看到下圖：

注意，上圖我是已經修改過了，正常情況最后一行的maxfiles為maxfiles 256 unlimited，因為只有256，確實很容易超出。

再次輸入sudo launchctl limit maxfiles 524288 524288并回車，這里會提示輸入密碼：

這里的密碼就是mac解鎖密碼，輸入密碼后即設置成功，再次輸入launchctl limit回車，可以看到已經修改成功。

當然上述命令中的524288并不是硬性要求，隨便什么數字都行，具體也請根據自身電腦配置情況來設置。

補充技能

由于之前均是使用公司Windows系統進行項目開發，現在使用個人Mac進行開發，Linux命令操作均需要進行技能學習。

先補充下，Mac下文檔光標定位技能。

「Command + 方向鍵上」將光標快速移動到整篇文本開頭，類似的，「Command + 方向鍵下」快速移動到文章結尾。

「Option + 方向鍵上」將光標移動到當前段落的開頭，「Option + 方向鍵下」移動到當前段落的末尾。

需要注意，如果光標在段落的開頭，「Option + 方向鍵上」可以將光標移動到上一段落的開頭，而光標在段落結尾時，「Option + 方向鍵下」則將光標移動到下一段落的結尾。

「Command + 方向鍵左」，將光標移動到句子的開頭，「Command + 方向鍵右」，則是移動到句子的末尾。

「Option + 方向鍵左」，將光標移動到前一個單詞，「Option + 方向鍵右」，將光標移動到單詞。這里有幾點要注意一下：

如果光標的初始位置在單詞的開頭，向前移動時，自動移動到前一個單詞的開頭。

如果光標的初始位置在單詞的結尾，向后移動時，自動移動到后一個單詞的結尾。

如果光標的初始位置在單詞中間，則光標向前移動時，移動到當前單詞的開頭，向后移動時，移動到當前單詞的結尾。

以按下組合鍵「Option + Shift + 方向鍵上」，即可選中光標所在位置到段落開頭的所有文本。按下「Option + Shift + 方向鍵下」，則是選中光標所在位置到段落結尾的所有文本。

「Option + Shift + 方向鍵左/右」可以選中一個單詞，「Command + Shift +左/右」可以選中一句話。

mac中delete鍵的5種用法

第一種：按 delete 鍵，實現 Windows 鍵盤上退格鍵的功能，也就是刪除光標之前的一個字符（默認）；

第二種：按 fn+delete 鍵，刪除光標之后的一個字符；

第三種：按 option+delete 鍵，刪除光標之前的一個單詞（英文有效）；

第四種：結合第二種，按住fn+option+delete，刪除光標之后的一個單詞；

第五種：選中文件后按 command+delete，刪除掉該文件。

Visual Studio Code(VSCode) Mac應用快捷鍵

光標移動

移動到單詞的最前面：option + ←

移動到單詞最末尾：option + →

將當前行代碼移動到上一行：option + ↑

將當前行代碼移動到下一行：option + ↓

移動到當前行最前面：cmd + ←

移動到當前行最末尾：cmd + →

花括號之間跳轉：cmd + shift + \

移動到文檔第一行或最后一行：cmd + ↑ / cmd + ↓

文本選擇

基于單詞，行，文檔的光標操作加上個shift鍵，就可以移動光標的同時選擇文本；例如，選擇當前光標所在位置到當前行最前面的代碼：cmd + ← + shift

刪除操作

刪除當前行光標后的所有字符：cmd + fn + delete

刪除當前行光標前的所有字符：cmd + delete

刪除當前單詞光標后的字符：option + fn + delete

把當前單詞光標前的字符刪除：option + delete

添加注釋

注釋一行代碼：cmd + /

注釋一整段代碼：option + shift + A

格式化代碼

格式化代碼：option + shift + F

格式化選中行代碼：cmd + K cmd + F

代碼縮進：cmd + shift + P

文件、符號、代碼之間的快速跳轉

control+ tab(同時按住)，繼續按著control鍵，松開tab鍵： 打開當前打開文件的列表，選擇要打開文件，松開control就能打開對應文件

cmd + P打開最近打開文件列表，同時列表頂部出現搜索框，搜索文件名，回車（enter），可以再當前窗口打開對應文件；使用cmd + enter會在新的編輯器窗口打開這個文件

control + G：行跳轉，輸入對應數字回車，可以跳轉到當前文件的當前行

cmd + P(輸入文件名 + “:” + 行數)：跳轉到指定文件的指定行數

cmd + shift + O：調出當前文件的符號（函數名等），使用方向鍵或者搜索，回車，就能跳轉到你想要的符號；如果輸入“:”可以對當前文件的所有符號進行分類

cmd + T：打開多個文件，搜索多個文件中的符號

F12：跳轉到函數的定義處

cmd + F12：跳轉到函數的實現位置；注：js中沒有接口的概念，定義和實現是相同的，所以js中的F12和Cmd + F12效果是一樣的

shift + F12：打開函數引用的預覽（把光標放在函數或者類上，按shift+F12可以打開一個引用列表和內嵌編輯器）

鼠標操作

在vscode中，

單擊鼠標左鍵：把光標移動到響應的位置；雙擊鼠標左鍵：將當前光標下的單詞選中；三擊鼠標左鍵：選中當前行代碼；四次點擊鼠標左鍵：選中整個文檔；

鼠標左鍵單擊行號：直接選中所在行；選中后，再按著shift，鼠標左鍵再次選擇行：可以選中多行代碼；

懸停提示窗口：當鼠標移動到某些文件上之后，一會就會顯示跟鼠標下文本相關的信息；如果鼠標放在某個函數上，按下cmd時，則能在懸停提示的窗口上看到該函數的實現。

代碼的跳轉和鏈接：如果我們把鼠標放在函數上時，函數下方會出現一個下劃線，然后當我們按下鼠標左鍵時，就能跳轉到該函數的定義處。cmd + 鼠標左鍵，跳轉到函數、變量定義的地方。當我們再編寫Markdown這樣的非編程語言的文檔時，還可以通過cmd+鼠標左鍵能打開超級鏈接。

拓展閱讀

RN官網（強烈建議閱讀，尤其是環境搭建環節）

Android Studio官網

Git教程

react-native-guide(ZH)

https://github.com/jondot/awesome-react-native(EN)

JDK Mac OS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。