react native项目创建

react native项目创建、运行、调试

1、项目命令行创建、运行

react-native init myrnprj1  // 创建工程
cd myrnprj1
react-native start // 开启packager服务--Running packager on port 8081.

//浏览器地址栏输入：http://localhost:8081/index.android.bundle?platform=android （正常会显示index.android.bundle 内容）
//，同时命令行会显示 Bundling index.android.js 100.0% (406/406), done.

2、从新打开一个命令行窗口，运行android真机/模拟器，进入当前项目myrnprj1目录，执行

react-native run-android

A、
初次应用运行，android真机/模拟器会显示“Could not get BatchedBridge, make sure your bundle is packaged correctly”界面

android 5.0版本以上,项目目录下命令行执行：

adb reverse tcp:8081 tcp:8081

android 5.0版本以下：（android真机/模拟器和pc端，需在同一网段才保持调试运行时彼此能正常通信，类似如此C/S）
点击右下角的菜单按键Menu，打开Developer Menu界面，点击Dev Settings -> Debug server host & port for device设置ip地址(react-native start运行端地址即pc端地址)和port端口号（8081），如：192.168.8.142：8081



B、
返回，重新打开Developer Menu界面，点击Reload重新加载index.android.js，一切正常则会显示功能界面了
C、
Developer Menu中点击Enable Live Reload项，开启动态加载功能，js代码发生变化后，React Native会自动生成bundle然后传输到模拟器或手机上

Debug JS Remotely:
在Developer Menu界面，点击启动JS远程调试功能 — pc端会自动打开chrome调试界面”http://localhost:8081/debugger-ui“（前提是pc上得安装有chrome），
若失败则android真机/模拟器会显示“Unable to connect with remote debugger”界面，着重关注chrome调试面板的 Sources（调试） Console（打印输出）菜单项：在Sources菜单界面，勾选”Pause On Caught Exceptions”功能，则Chrome 开发者工具能够在错误代码处停住

Debug JS Remotely：
点击Developer Menu的Debug JS Remotely项开启, 成功会自动开启chrome调试界面

Enable Live Reload：
会在保持你的程序状态的情况下，就可以将最新的代码部署到设备上，但每次都会自动返回到启动页面

Hot Reloading：
会自动生成此次修改代码的增量包，然后传输到手机或模拟器上以实现热加载