React Native开发总结之:开发技巧和调试技巧

96
ZPengs
2017.05.03 10:49* 字数 923

欢迎大家加群讨论

点击链接加入群[ReactNative-解决问题交流群] :644124441

点击链接加入群[ReactNative技术交流群2] :687663534

还需要完善

一、调试技巧:

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发布(亲测可行)

ReactNative开发记录