React Native 中遇到的问题
首先，我在React Native的安装和运行中出现了层出不穷的错误，一度刷新我的心理承受能力。为此，我特写此篇文章以减少和我一样遭受这些错误折磨的朋友们。
以下为我在React Native在从安装到运行代码的过程中，总结的所有的问题以及解决的方法。
一、环境搭建中遇到的错误
1.首先，React Native的环境搭建包括以下环境：
- JDK
- Python2
- Node.js
- yarn、npm
- Android Studio（这个主要在于SDK的配置）
当然以上的环境搭建还需要环境变量的配置，这个大家可以从百度上搜索下，在此我就不细讲了。
以下我附上了React Native官方搭建开发环境的链接供大家参考
React Native官方搭建开发环境
当然除环境搭建以外，还需要夜神模拟器来预览你的项目
2.接下来就是我所环境搭建中所遇到的错误
环境搭建好的朋友，就在命令窗口输入以下命令：
- react-native init hello --version 0.55.4 创建项目
- cd hello 进入项目
- adb connect 127.0.0.1:62001 连接夜神模拟器
- react-native run-android 运行项目
app：installDebug
这个错误是在运行项目中出现的，提示的Bug是"app：installDebug",主要原因在于gradle。
解决方法：
1）.通过Android Studio打开react-native中的android工程
2）.打开后会发现Gradle报错，按照报错信息完成修改即可
这个错误是Ndoe.js还没有搭建好
index.android.bundle
解决方法：
（以下均在命令窗口上运行）
1）创建缺失的目录：mkdir android\app\src\main\assets
2）在创建好的目录添加程序需要的文件：react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
3）：react-native run-android
二、夜神模拟器中出现的错误
这个错误是模拟器没有连接上服务器，即网络地址不对
解决方法：
1）重新修改网络地址
2）网络地址在命令窗口输入ipconfig查询
3） 输入 网络地址：8081
4）重新刷新
这个错误是找不到有效的属性的style，一般在代码中你设置的某个属性的style，但没有对这个style进行修饰
解决方法：
对style进行修饰
这个错误是react native的代码只接受.jpeg或.png格式的图片，而我的代码中是.jpg格式的图片
解决方法：将图片改成.jpeg或.png格式
500错误一般都是代码中的输入错误，出现此错误的时候就应该好好检查代码，是否某处代码有错误
三、在一个项目中运行不同页面
修改相应的js名及js的类名即可
四、React Native调试
1、调试方法
1）在夜神模拟器点击菜单栏，点击“Debug JS Remotely”
2）点击后Chorme跳出"http://localhost:8081/debugger-ui"页面
3）打开Chrome菜单->选择更多工具->选择开发者工具
2、Sources面板
Sources面板提供了调试 JavaScript 代码的功能
Sources面板可以让你看到你所要检查的页面的所有脚本代码，并在面板选择栏下方提供了一组标准控件，提供了暂停，恢复，步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。源码显示在单独的标签页，通过点击 打开文件导航面板，导航栏中会显示所有已打开的脚本文件
Chrome开发着工具中的Sources面板几乎是最常用的功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，首先就会打开Sources进行js断点调试
执行控制工具
从上图可以看到’执行控制工具’按钮在侧板顶部，让你可以按步执行代码，当你进行调试的时候这几个按钮非常有用：
- 继续(Continue): 继续执行代码直到遇到下一个断点
- 单步执行(Step over): 步进代码以查看每一行代码对变量作出的操作，当代码调用另一个函数时不会进入这个函数，使你可以专注于当前的函数
- 跳入(Step into): 与 Step over 类似，但是当代码调用函数时，调试器会进去这个函数并跳转到函数的第一行
- 跳出(Step out): 当你进入一个函数后，你可以点击 Step out 执行函数余下的代码并跳出该函数
- 断点切换(Toggle breakpoints): 控制断点的开启和关闭，同时保持断点完好
查看js文件
如果你想在开发者工具上预览你的js文件，可以在打开Sources tab下的debuggerWorker.js选项卡，该选项卡下会显示当前调试项目的所有js文件，或者是用快捷键 cmd + o 调出文件搜索直接进行搜索，这个更加便捷高效
断点
在 Sources 面板的文件导航面板中打开一个JavaScript文件来调试，点击边栏(line gutter) 为当前行设置一个断点，已经设置的断点处会有一个蓝色的标签，单击蓝色标签，断点即被移除
右键点击蓝色标签会打开一个菜单，菜单包含以下选项：执行到此(Continue to Here)，黑盒脚本(Blackbox scripts)，移除断点(Remove Breakpoint)， 编辑断点(Edit Breakpoint)，和 禁用断点(Disable Breakpoint)。在这里你可以对断点进行更高级的操作
