歡迎大家加群討論
點(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)試讨便。
然后選擇檢查代碼：
可以在console面板進(jìn)行調(diào)試充甚！
停止可以再次點(diǎn)擊：
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ì)很慢
解決:
找到:
這個(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è)可行）
