《React Native移动开发实战》一一1.4 第一个React Native应用

1.4 第一个React Native应用
  颇费一番周折搭建好环境之后,终于可以长舒一口气,来开发第一个React Native应用了。
1.4.1 初始化项目
  首先,使用React Native命令行工具来初始化一个新的项目:

react-native init ch02

  等待工程创建成功并安装好所有依赖后,使用Atom打开ch02项目,来仔细瞧一瞧React Native项目结构,如图1.21所示。
《React Native移动开发实战》一一1.4  第一个React Native应用

图1.21 React Native项目结构
  其中目录和文件的详细说明如表1.1所示。
《React Native移动开发实战》一一1.4  第一个React Native应用

  回答:这是因为.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浏览器进行断点调试。关于更多调试选项的使用,读者可以在实际开发中探索和熟悉。

上一篇:php连接sql_server数据库


下一篇:(转)C# 快速高效率复制对象的方式