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 menuKeyboard选项下的 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发布(亲测可行)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容