React Native開發總結之：開發技巧和調試技巧

歡迎大家加群討論

點擊鏈接加入群聊【ReactNative技術交流群3】：1085660877

還需要完善

一、調試技巧：

1.1開啟Developer Menu

** Android模擬器：**
可以通過Command? + M或者搖一搖手機
快捷鍵來快速打開Developer Menu。也可以通過模擬器上的菜單
鍵來打開。
高版本的模擬器通常沒有菜單鍵的，不過Nexus S上是有菜
單鍵的，如果想使用菜單鍵，可以創建一個Nexus S的模擬器。
iOS模擬器：
可以通過Command? + D
快捷鍵來快速打開Developer Menu
在真機上：
在真機上你可以通過搖動手機來開啟Developer Menu。

1.2 Reload js

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

提示：如果Command? + R
無法使你的iOS模擬器加載js，則可以通過選中Hardware menu中Keyboard選項下的 Connect Hardware Keyboard

1.3 Debug JS Remotely

可以進行chrome調試。


image.png

然后選擇檢查代碼：

image.png

可以在console面板進行調試！
停止可以再次點擊：

image.png

1.4 Enable Live Reload

Automatic reloading
該選項提供了React Native動態加載的功能。當你的js代碼發生變化后，React Native會自動生成bundle然后傳輸到模擬器或手機上。省去手動Reload。

1.5更方便的方法Enable Hot Reloading

熱更新，當你的代表發生變化時，模擬器上會實時進行修改。而且無需跑到重啟界面，可以在當前界面進行渲染！

1.6 常用命令

創建項目

react-native init AwesomeProject   //AwesomeProject是項目名
啟動 Node.js web server

react-native start
啟動android

react-native run-android
啟動ios

react-native run-ios

運行特定模擬器：
react-native run-ios --simulator "iPhone 5"

1.7 解除黃屏警告 :

 在默認情況下，開發模式中啟用了黃屏警告?？梢酝ㄟ^以下代碼關閉：

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

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

紅屏和黃屏在發布版（release/production）中都是自動禁用的。

1.8 訪問控制臺日志

在運行RN應用時，可以在終端中運行如下命令來查看控制臺的日志：
$ react-native log-ios$ react-native log-android

此外，你也可以在iOS模擬器的菜單中選擇Debug → Open System Log...
來查看。如果是Android應用，無論是運行在模擬器或是真機上，都可以通過在終端命令行里運行adb logcat *:S ReactNative:V ReactNativeJS:V
命令來查看。

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需要到國外服務器下載二進制包，所以國內用戶這一步很可能會卡住。此時請在環境變量
中添加electron專用的國內鏡像源：ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
，然后再嘗試安裝react-devtools。

安裝完成后在命令行中執行react-devtools
即可啟動此工具：
react-devtools

也可以在固定項目中安裝
cd到你的項目目錄:
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.

二、開發技巧：

2.1 js 用正則表達式驗證URL：

方法一(比較簡單的方法)：

// 用正則表達式判斷是否為正確的網址
                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("無效網址！");
                    return;
                }
                else{
                    // alert("輸入成功");
                }
                // 用正則表達式判斷是否為正確的網址 END

方法二：

 // 用正則表達式判斷是否為正確的網址
                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]\." // 二級域名
                    + "[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("無效網址！");
                    return;
                }
                else{
                    // alert("輸入成功");
                }
                // 用正則表達式判斷是否為正確的網址 END

方法三：用來驗證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;
    }
}

這里比較全面以上是我用過的這里有些我沒用過可以看看：

2.2優化打包速度(真機運行速度)

原因

就是react-native-xcode.sh. 每次打包安裝都重新把RN文件打包成main.jsbundle, 在機械硬盤的渣渣電腦上操作那數以萬計個的文件,所以會很慢

解決:

找到:

image.png

這個腳本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

這樣真機測試的手安裝就會快了.

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

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

相關文章:
1.React Native開發錯誤警告處理總結（已解決 ！持續更新)
2.ReactNative 實現的文件上傳功能(實測可行！)
3.React Native開發總結：一、開發環境配置
4.ReactNative之Android打包APK方法（趟坑過程)
5.Android 調試錯誤總結（ReactNative開發）（持續更新）
6.ReactNative開發之真機測試
7.React Native開發之iOS打包ipa發布（親測可行）

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容