《React Native移动开发实战》一一1.4 第一个React Native应用-阿里云开发者社区

开发者社区> 华章计算机> 正文

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

简介: 本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.1节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
+关注继续查看

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

react-native init ch02

  等待工程创建成功并安装好所有依赖后,使用Atom打开ch02项目,来仔细瞧一瞧React Native项目结构,如图1.21所示。
image

图1.21 React Native项目结构
  其中目录和文件的详细说明如表1.1所示。
image

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生(套打报表)
原文:ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生(套打报表) 6月27日京东商城发布了中国电子商务领域首张电子发票,同时宣布相关系统正式上线,这标志着中国电子商务的步伐又向前迈出了重要的一步。
910 0
React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
作者:Parry 出处:http://www.cnblogs.com/parry/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
882 0
《React Native移动开发实战》一一2.3 React Native的JSX解决方案
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.3节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1004 0
《React Native移动开发实战》一一2.2 Git版本控制工具
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1766 0
《React Native移动开发实战》一一2.1 开发具备的基础知识说明
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.1节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
950 0
使用阿里云容器服务 ACK 和文件存储 NAS 构建现代化企业应用
大规模构建容器化应用程序需要高可靠、弹性、共享且支持高性能数据处理的数据存储解决方案。通过迁移到公共云,企业可以获得更高的生产效率和更低的成本。阿里云文件存储可以为现代化应用提供强健的数据稳定性,可靠性,高性能和在线扩展能力。
1365 0
Spring+Log4j+ActiveMQ实现远程记录日志——实战+分析
这几天由于工作需要,研究了一下远程打印日志的方式,于是将研究结果记录在此,分享给大家,希望对大家有所帮助。
1464 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载