React Native開發(fā)總結(jié)之：開發(fā)技巧和調(diào)試技巧

歡迎大家加群討論

點(diǎn)擊鏈接加入群聊【ReactNative技術(shù)交流群3】：1085660877

還需要完善

一、調(diào)試技巧：

1.1開啟Developer Menu

** Android模擬器：**
可以通過(guò)Command? + M或者搖一搖手機(jī)
快捷鍵來(lái)快速打開Developer Menu。也可以通過(guò)模擬器上的菜單
鍵來(lái)打開。
高版本的模擬器通常沒(méi)有菜單鍵的，不過(guò)Nexus S上是有菜
單鍵的，如果想使用菜單鍵，可以創(chuàng)建一個(gè)Nexus S的模擬器。
iOS模擬器：
可以通過(guò)Command? + D
快捷鍵來(lái)快速打開Developer Menu
在真機(jī)上：
在真機(jī)上你可以通過(guò)搖動(dòng)手機(jī)來(lái)開啟Developer Menu。

1.2 Reload js

Reload js即將你項(xiàng)目中js代碼部分重新生成bundle，然后傳輸給模擬器或手機(jī)。在Developer Menu中有Reload
選項(xiàng)，單擊Reload
讓React Native重新加載js。對(duì)于iOS模擬器你也可以通過(guò)Command? + R
快捷鍵來(lái)加載js，對(duì)于Android模擬器可以通過(guò)雙擊r
鍵來(lái)加載js。

提示：如果Command? + R
無(wú)法使你的iOS模擬器加載js，則可以通過(guò)選中Hardware menu中Keyboard選項(xiàng)下的 Connect Hardware Keyboard

1.3 Debug JS Remotely

可以進(jìn)行chrome調(diào)試。


image.png

然后選擇檢查代碼：

image.png

可以在console面板進(jìn)行調(diào)試！
停止可以再次點(diǎn)擊：

image.png

1.4 Enable Live Reload

Automatic reloading
該選項(xiàng)提供了React Native動(dòng)態(tài)加載的功能。當(dāng)你的js代碼發(fā)生變化后，React Native會(huì)自動(dòng)生成bundle然后傳輸?shù)侥M器或手機(jī)上。省去手動(dòng)Reload。

1.5更方便的方法Enable Hot Reloading

熱更新，當(dāng)你的代表發(fā)生變化時(shí)，模擬器上會(huì)實(shí)時(shí)進(jìn)行修改。而且無(wú)需跑到重啟界面，可以在當(dāng)前界面進(jìn)行渲染！

1.6 常用命令

創(chuàng)建項(xiàng)目

react-native init AwesomeProject   //AwesomeProject是項(xiàng)目名
啟動(dòng) Node.js web server

react-native start
啟動(dòng)android

react-native run-android
啟動(dòng)ios

react-native run-ios

運(yùn)行特定模擬器：
react-native run-ios --simulator "iPhone 5"

1.7 解除黃屏警告 :

 在默認(rèn)情況下，開發(fā)模式中啟用了黃屏警告?？梢酝ㄟ^(guò)以下代碼關(guān)閉：

console.disableYellowBox = true;
console.warn('YellowBox is disabled.');
你也可以通過(guò)代碼屏蔽指定的警告，像下面這樣調(diào)用ignoreWarnings方法，參數(shù)為一個(gè)數(shù)組：

YellowBox.ignoreWarnings(['Warning: ']);
數(shù)組中的字符串就是要屏蔽的警告的開頭的內(nèi)容。（例如上面的代碼會(huì)屏蔽掉所有以Warning開頭的警告內(nèi)容）

紅屏和黃屏在發(fā)布版（release/production）中都是自動(dòng)禁用的。

1.8 訪問(wèn)控制臺(tái)日志

在運(yùn)行RN應(yīng)用時(shí)，可以在終端中運(yùn)行如下命令來(lái)查看控制臺(tái)的日志：
$ react-native log-ios$ react-native log-android

此外，你也可以在iOS模擬器的菜單中選擇Debug → Open System Log...
來(lái)查看。如果是Android應(yīng)用，無(wú)論是運(yùn)行在模擬器或是真機(jī)上，都可以通過(guò)在終端命令行里運(yùn)行adb logcat *:S ReactNative:V ReactNativeJS:V
命令來(lái)查看。

1.9React Developer Tools 的安裝

With React Native 0.43 or higher, you can use [the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) to debug the React component hierarchy. To use it, install the react-devtools
 package globally:

npm install -g react-devtools

譯注：react-devtools依賴于electron，而electron需要到國(guó)外服務(wù)器下載二進(jìn)制包，所以國(guó)內(nèi)用戶這一步很可能會(huì)卡住。此時(shí)請(qǐng)?jiān)诃h(huán)境變量
中添加electron專用的國(guó)內(nèi)鏡像源：ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
，然后再嘗試安裝react-devtools。

安裝完成后在命令行中執(zhí)行react-devtools
即可啟動(dòng)此工具：
react-devtools

也可以在固定項(xiàng)目中安裝
cd到你的項(xiàng)目目錄:
Yarn, you can runyarn add --dev react-devtools, and then runyarn react-devtools from your project folder to open the DevTools. With npm, you can runnpm install --save-dev react-devtools, add "react-devtools": "react-devtools" to the scripts section in your package.json, and then runnpm run react-devtoolsfrom your project folder to open the DevTools.

二、開發(fā)技巧：

2.1 js 用正則表達(dá)式驗(yàn)證URL：

方法一(比較簡(jiǎn)單的方法)：

// 用正則表達(dá)式判斷是否為正確的網(wǎng)址
                var strRegex = /^((https|http|ftp|rtsp|mms)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
                var reg=new RegExp(strRegex);
                if(!reg.test(webURL)){
                    alert("無(wú)效網(wǎng)址！");
                    return;
                }
                else{
                    // alert("輸入成功");
                }
                // 用正則表達(dá)式判斷是否為正確的網(wǎng)址 END

方法二：

 // 用正則表達(dá)式判斷是否為正確的網(wǎng)址
                var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
                    + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@
                    + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
                    + "|" // 允許IP和DOMAIN（域名）
                    + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
                    + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二級(jí)域名
                    + "[a-z]{2,6})" // first level domain- .com or .museum
                    + "(:[0-9]{1,4})?" // 端口- :80
                    + "((/?)|" // a slash isn't required if there is no file name
                    + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
                var reg=new RegExp(strRegex);
                if(!reg.test(webURL)){
                    alert("無(wú)效網(wǎng)址！");
                    return;
                }
                else{
                    // alert("輸入成功");
                }
                // 用正則表達(dá)式判斷是否為正確的網(wǎng)址 END

方法三：用來(lái)驗(yàn)證IP：

function isValidIP(ip){
    var ipRegExp= /([0-9]{1,3}\.{1}){3}[0-9]{1,3}/;
    if(ipRegExp.exec(ip)){
        return true;
    }else{
        return false;
    }
}

這里比較全面以上是我用過(guò)的這里有些我沒(méi)用過(guò)可以看看：

2.2優(yōu)化打包速度(真機(jī)運(yùn)行速度)

原因

就是react-native-xcode.sh. 每次打包安裝都重新把RN文件打包成main.jsbundle, 在機(jī)械硬盤的渣渣電腦上操作那數(shù)以萬(wàn)計(jì)個(gè)的文件,所以會(huì)很慢

解決:

找到:

image.png

這個(gè)腳本react-native-xcode.sh在最頭上加上

if [ "$CONFIGURATION" = "Debug" ]; then
  echo "--- Skip bundle building in 'Debug' mode"
  exit 0
fi

或者:

DEST=$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH

if [ "$CONFIGURATION" = "Debug" ] && [ -f "$DEST/main.jsbundle" ]; then
  echo "--- Skip bundle building in 'Debug' mode"
  exit 0
fi

這樣真機(jī)測(cè)試的手安裝就會(huì)快了.

注意 :如果你是打包需要注意修改代碼后

,需要Command+Shift+K清除工程緩存, 重新Build, 生成新的main.jsbundle.

相關(guān)文章:
1.React Native開發(fā)錯(cuò)誤警告處理總結(jié)（已解決 ！持續(xù)更新)
2.ReactNative 實(shí)現(xiàn)的文件上傳功能(實(shí)測(cè)可行！)
3.React Native開發(fā)總結(jié)：一、開發(fā)環(huán)境配置
4.ReactNative之Android打包APK方法（趟坑過(guò)程)
5.Android 調(diào)試錯(cuò)誤總結(jié)（ReactNative開發(fā)）（持續(xù)更新）
6.ReactNative開發(fā)之真機(jī)測(cè)試
7.React Native開發(fā)之iOS打包ipa發(fā)布（親測(cè)可行）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文出自《React Native學(xué)習(xí)筆記》系列文章。 在做React Native開發(fā)時(shí)，少不了的需要對(duì)Reac...
    CrazyCodeBoy閱讀 14,705評(píng)論 6贊 42
  • 在做React Native開發(fā)時(shí)，少不了的需要對(duì)React Native程序進(jìn)行調(diào)試。調(diào)試程序是每一位開發(fā)者的基...
    街角仰望閱讀 599評(píng)論 0贊 0
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,675評(píng)論 25贊 709
  • 持續(xù)更新中...... 一套企業(yè)級(jí)的 UI 設(shè)計(jì)語(yǔ)言和 React 實(shí)現(xiàn)。 https://mobile.ant....
    日不落000閱讀 6,047評(píng)論 0贊 35
  • 當(dāng)你晚上躺下來(lái)的時(shí)候，仔細(xì)的想想，其實(shí)人活著真的不容易，每一天都會(huì)發(fā)生你想不到的事情，有高興的、有生氣的、有無(wú)奈的...
    林安福閱讀 1,263評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容