react-native初探-CSDN博客

原因

近期因为项目需要，所以开始着手学习app开发，对于java安卓和ios是一点不懂，刚好身边有人做过react-native，于是和公司的导师商量使用react-native来开发app

准备工作

开发app不同于我们写页面，是需要搭建一个环境的，所有的代码都在这个环境中去运行，环境就相当于我们的浏览器，只是这个环境需要我们自己去搭建。环境也是学习react-native中非常重要的一环，下面我也是会详细说道，当然具体大家也可以参考官方的react-native的文档来学习，其中文档当中没有的，我也会提到。环境分为两套，安卓和ios的环境是不一样的，我们用windows电脑只能搭建安卓的环境，ios只能在mac电脑上面搭建，并且安卓也可以在mac上面搭建，先来看看安卓的搭建环境。

下载sdk、node、react-native命令行工具，这个可以根据官方文档所说，一步一步完成下载，需要注意的地方在于sdk中包含很多版本，需要注意安装react-native所需的版本，另外官方文档提到了安装python,但是我没有装，项目也依然跑起来了，暂时还不清楚这个python的作用。（sdk安装可以按照文档所说，下载android studio，也可以直接下载sdk，这个看你个人喜欢）
配置环境变量。有两个环境变量需要配置，一个是sdk的环境变量，这个一定要路径正确，不然是不起作用的，设置好以后，关闭cmd，重新启动才会生效，另外一个环境变量就是adb和platform-tools的环境变量，相信前面下载过sdk的时候，在sdk的文件夹下面有两个文件夹，一个是tools,一个platform-tools,设置好以后，后面我们可以直接使用adb命令，而不需要进入到abd命令的文件夹下使用了。
连接模拟机，推荐android模拟机可以去这个genymotion官网去下载，专门调试的模拟机，比android studio自带的要好一点，安装好模拟机以后，在命令行里面敲下 adb devices 如果显示了一个地址，地址后面跟上了device，说明模拟机链接成功了
连接真机，usb连接电脑，在手机设置中打开usb调试模式，然后命令行敲adb devices如果有devices显示，说明真机连接成功了，需要注意的是，usb调试不同的android版本，设置上面显示的位置不同，需要大家自己上网去查询相usb设置的位置，一般android8.0以上的机子，设置都在开发者选项的菜单中，5.0以下的可能是在应用程序选项中。

相比较而言的话，在mac电脑上配置环境则简单一些

在mac上除了下载node以外，你只需要装上xcode，还有watchman即可，xcode在appstore中就可以下载，watchman按照官方文档教程下载即可，千万需要注意的是文档中有一处提示到一些第三库非常难以下载，如果你的项目一直无法跑起来的话，记得点击这里的链接下载第三方库，将下载好的文件导入到.rncache文件夹中就可以了
在模拟机上启动项目，这里因为我还没有尝试过在ios真机上运行项目，所以就不说真机了，另外真机运行还需要配置签名，有需要的同学可以对照文档就可以了，我只说一些大家可能遇到的，因为启动项目，系统默认打开的是iphoneX，如果需要打开别的机型的模拟器，可以命令行这样react-native run-ios --simulator "iPhone 4s"，即可以打开相应的机型的模拟器。

创建项目

创建项目其实有几种方法都可以创建，我这里就使用了最简单的命令行创建的方法，需要注意第一次创建的时候，项目会编译很多文件，所以会比较慢，另外如果遇到编译报错，控制台出现红字这样的情况，可以关掉命令行，再次重新启动，因为某些下载的包是国外的，可能会出现错误。
项目启动成功以后，模拟机或者真机会自动跳到app当中，如果你看到了页面说明创建成功了，如果出现了红屏这样的情况，大家也可以去react-native的社区看看是什么原因，因为每个人情况不同，所以具体还是要看红屏报的什么错来解决问题。
在android上，摇晃手机就可以呼出开发者菜单，模拟机上，按下红圈的按钮就可以呼出菜单，我们一般需要打开热更新可以热加载，第二个debug是用来在浏览器上调试的，后面会说道，另外最后一项devSettings后面调试的时候需要配置自己的电脑的ip地址。
在mac上面只要按下cmd+d就可以呼出菜单，菜单和android其实也是一样的。
toggle inspector是用来查看app上面的元素的，等同于我们浏览器打开开发者工具审查元素，但是功能还是不够强大的。

调试

刚刚上面说到点击devSettings，然后出现下面这个菜单，点击debug这个菜单选项，会弹出一个窗口输入你的电脑的ip地址就可以了，注意端口还是默认的8081，点击确认以后，进入页面，点击debugjsRemotely系统会自动打开浏览器，然后就像调试网页那样，打开开发者工具，早console中可以看到我们在代码中的console.log的输出，注意这里只能使用console，元素什么都是用不了。
除了这个默认的调试以外，其实还有一个谷歌浏览器的插件，叫做react-devtools，不过需要翻墙下载，大家有兴趣可以研究一下，我自己下载了一个，除了可以看到app当中的元素，样式，感觉用处并不大，因为app中的元素和html的元素是完全不一样的，就算看到了app的元素现在对于初学的我们来说，用处不大。

写在最后

react-native社区还是非常强大的，这也是当初选择他的原因，其他的诸如weex，mui以及flutter，Hbuild都有考虑过，但是最终还是选择了RN，但是不论选择哪种框架，最后都需要回归到原生的java android以及oc和swift，如果认真需要做好app的话，那这些也是必不可少需要们去学习的，最后贴出一张图，是我最近模仿app做出的一个demo，还在继续更新中，有兴趣的同学也可以去Github上面看看，如果有不对的地方，欢迎大家issue，万分感谢，希望能和大家一起学好RN。