在app开发过程中 混合开发已经逐渐变成趋势 相比较于之前的cordova 或者hbuild rn在性能和效果上都有极大的优势 根据rn中文网的介绍 React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致 。入门教程可以参考 https://reactnative.cn/ 里面有较为详细的教程 此文档只为记录学习过程中踩过的坑和资料的补充。
1 环境配置
本文介绍的是基于android 平台的 rn开发 所以必装的工具有以下几种 Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。
1.1 nodejs的安装 因为rn的依赖要求 Node 的版本必须高于 8.3 如果你的开发过程中需要频繁的切换node版本 建议直接使用nvm 来管理node 以便于切换node的不同版本 这里就不介绍nvm的安装过程了 网上的资料很多 安装完之后 我们查看以下 当前的node版本
node 版本
1.2 安装 react native的命令行工具， 官方给出的建议是通过yarn来替代npm的， 这里先说明一下 nvm nodejs npm 三者之间的关系和区别。 nvm: nodeJs版本管理工具,管理nodejs版本和对应的npm版本 nodejs: reactNative开发过程中所需要的代码库。 npm :管理对应nodejs的第三方插件。
一个reactNative项目只包含一个nodejs和npm,nodejs和npm是配套关系， 一对一的关系。
我这边暂时没有使用 yarn来替代npm 后面可能会调整过来 对开发没有影响
rn命令安装
1.3 python的安装 根据官网的提示 ，Python 的版本必须为 2.x（不支持 3.x）进入https://www.python.org/downloads/windows/ 进行下载
python版本
2.7的版本是主流版本
python命令
安装完之后 进入cmd 发现python提示 不是内部或外部命令，也不是可运行的程序 这个时候我们需要为python配置环境 把它添加到路径下 我的电脑->属性->高级设置->系统变量 找到自己的python安装的文件路径：
PATH
添加pathon安装地址
最后cmd中输入python命令 查看安装的版本号。
2 第一个工程
切换到你放置文件的路径下 执行 react-native init xxx 来创建第一个rn项目 xxx为项目名称
创建项目
这样我们第一个rn的项目就创建完成了， Windows 用户请注意，请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！
接下来先用命令行试试运行项目 , 确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android 。 cmd中通过cd 进入工程 ， 执行react-native run-android 命令， 但是不建议建议使用命令。 因为这个过程严重依赖稳定的翻墙工具 ， 经常会出现断开和连接超时的情况 ， 而且编译的过程很久导致效率很低。
直接使用 android studio来运行 进入工程目录下 选择android
文件目录
运行项目
项目运行
注意一定要先启动nodejs的服务 （cd进入项目工程中， 输入react-native start 启动nodejs的服务）
运行app之后 在真机上查看出现了错误
错误界面
这个错误出现是因为项目没有连接到服务端 一般有两种方式处理
方法一：设置IP和端口
具体步骤：报错页面晃动手机，显示菜单 =》 点击Dev Settings =》 点击Debug server host & port for device =》 设置IP和端口（ex:192.168.0.20:8081）=》 点击返回 =》 页面是空白，再次点击摇一摇，选择Reload JS程序就显示出来了。
端口8081是固定的,ip地址就是电脑所在ip地址
nodejs服务启动
app端进行服务连接
如果这个方法不成功 可以采用手动修改项目的方法
方法二：原因没有找到assets下文件，需要手动创建并设置
1.手动在main下建立一个assets文件夹,也可以用命令行
mkdir android/app/src/main/assets
2.然后cmd 进入项目的根目录下执行：
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；
在实际的开发过程中 ，使用第一种方法之后发现错误界面没有了 ，但是界面出现了白屏 。查阅资料后发现，从RN0.5开始之后,第一次用命令react-native run-android时,方法一和方法二都要设置一次 所以再执行一次第二种方法 ，再次运行项目 app展示出了成功的界面。
项目构建成功
3 第一次调试
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。
MenuDeveloper Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。
提示：生产环境release (production) 下Developer Menu是不可用的。
本文只提供在真机上的启动方法和功能介绍， 模拟器的请自行查阅资料 。 根据初始化界面的提示 ， 可以通过摇动手机来唤醒menu界面。
调试菜单界面
reload
reload 是调试js界面的显示的 如果我需要把welcome to react native替换成中文显示 或者给文字加上颜色 需要进入到项目下的app.js文件 找到对应的代码位置 进行修改
修改app.js
修改之后需要看到效果 其实有两种 第一种就是重新运行app项目 但是这种的效率太低 每一次调试都需要重新编译 所以这里我们就可以通过摇动手机 调出menu 选择reload进行js的重加载
错误界面
通过查看运行的命令控制台界面 可以明显找到错误的位置和原因 注意如果reload中报错 进行修改之后 需要重新执行 react native start命令才能生效
Debug JS Remotely
在Developer Menu下单击”Debug JS Remotely” 启动JS远程调试功能。此时Chrome会被打开，同时会创建一个“http://localhost:8081/debugger-ui.” Tab页
debug在线调试
调试界面
在此界面 可以通过断点的方式或者通过console打印数据来进行调试。
Enable Live Reload
在 Developer Menu中你会看到”Enable Live Reload” 选项，该选项提供了React Native动态加载的功能。当你的js代码发生变化后，React Native会自动生成bundle然后传输到模拟器或手机上
Hot Reloading
如果说Enable Live Reload解放了你的双手的话，那么Hot Reloading不但解放了你的双手而且还解放了你的时间。 当你每次保存代码时Hot Reloading功能便会生成此次修改代码的增量包，然后传输到手机或模拟器上以实现热加载。相比 Enable Live Reload需要每次都返回到启动页面，Enable Live Reload则会在保持你的程序状态的情况下，就可以将最新的代码部署到设备上。
提示：当你做布局的时候启动Enable Live Reload功能你就可以实时的预览布局效果了，这可以和用AndroidStudio或AutoLayout做布局的实时预览相媲美。
Warnings
React Native程序运行时出现的Warnings也会被直接显示在屏幕上，以黄色的背景显示，并会打印出警告信息。 你也可以通过 console.warn()来手动触发Warnings。 你也可以通过console.disableYellowBox = true来手动禁用Warnings的显示，或者通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。
小技巧学习
远程在线调试
网友评论