1.4 第一个React Native应用
颇费一番周折搭建好环境之后,终于可以长舒一口气,来开发第一个React Native应用了。
1.4.1 初始化项目
首先,使用React Native命令行工具来初始化一个新的项目:
react-native init ch02
等待工程创建成功并安装好所有依赖后,使用Atom打开ch02项目,来仔细瞧一瞧React Native项目结构,如图1.21所示。
图1.21 React Native项目结构
其中目录和文件的详细说明如表1.1所示。
回答:这是因为.gitignore文件中忽略了node_modules文件夹下面的文件,所以第三方库没有被添加到版本控制工具中,要运行从网络下载的React Native项目,首先需要在根目录下执行npm install或cnpm install,安装所依赖的第三方库到node_modules文件夹中。
1.4.2 运行项目
成功运行React Native项目的前提是对应的原生开发工具安装和配置正确!例如:
- 运行iOS App,需要正确安装和配置Xcode工具。
- 运行Android App,需要正确安装和配置Android Studio and SDK Tools。
1.运行iOS App
首先,通过如下命令查看可用的iOS设备。
xcrun simctl list devices
接着,通过指定设备名称就可以运行iOS App了。
react-native run-ios --simulator "iPhone 7"
然后耐心地等待编译和安装成功后,第一个React Native应用就运行起来啦!如图1.22所示。
2.运行Android App
同样,先通过如下命令查看可用的Android设备。
adb devices
接着,通过指定设备名称运行Android App。
react-native run-android emulator-5554
运行效果如图1.23所示。
![image](https://yqfile.alicdn.com/16d3a31ae3e855b175ea456c11ceff5382596160.png)
图1.22 运行在iOS模拟器中的React Native应用 图1.23 运行在Android模拟器中的React Native应用
运行完第一个React Native应用,想必读者已经感受到了React Native强大之处:不需要了解iOS和Android原生开发平台,使用JavaScript就可以开发出可以运行在多个平台的移动应用!
1.4.3 调试项目
在此,笔者还想补充说明一下关于React Native调试选项的相关内容。因为React Native不仅运行跨平台应用很方便,而且还提供了很多好用的调试工具加速开发。
真机调试时晃动设备就可以打开调试选项,模拟器调试时还可以使用如下快捷键。
- iOS模拟器快捷键:command + D。
- Android模拟器快捷键:command + M。
调试效果如图1.24所示。
这里打开Enable Live Reload选项,这样在React Native项目中做任何修改后,不需要重新启动或加载App,运行中的App都可以自动更新了。
?提示:除了Enable Live Reload选项,React Native还提供了其他很便利的调试选项,例如,远程调试选项Debug JS Remotely,可以使用Chrome浏览器进行断点调试。关于更多调试选项的使用,读者可以在实际开发中探索和熟悉。