欢迎大家加群讨论

点击链接加入群[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 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发布（亲测可行）