《React Native移动开发实战》一一1.6 小 结

对不起,我来晚了 首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助.感谢,再次感谢!!! 工作6年多以来,一直想写一本自己的书,一方面是对自己工作经历的一个总结,也是对希望写一本书给曾经的自己一个交代,毕竟30岁的人了,搞不了几年的技术了. 我一直有写博客的习惯,喜欢将自己工作和生活的点滴写成博客,分享给大家.说说我写书的缘由吧,最近几年,特别是15年和16年,我朋友圈的好友陆续出了自己

1.3 搭建React Native开发环境 "磨刀不误砍柴工",在正式开发React Native应用之前,需要先搭建好React Native的开发环境.搭建React Native开发环境有以下几个主要步骤. 原生开发工具:iOS开发使用Xcode,Android开发使用Android Studio and SDK Tools. Node.js(https://nodejs.org/):React Native是借助Node.js,即JavaScript运行时来创建JavaScr

1.1 看透React Native React Native(http://facebook.github.io/react-native/)第一次进入公众的视野是在2015年1月的React.js Conf(http://conf.reactjs. org/)上,随后,同年5月份,Facebook在F8 Conference(https://www. fbf8.com/)上正式宣布:React Native项目(如图1.1所示) 在Github开源.结果一天之内,就收获了5000多颗星,受关

前言 随着手机和移动互联网技术的日益成熟,移动应用的领域也从如何开发,发展到如何更高效.更低成本地开发.传统的原生平台(iOS.Android)开发技术虽然比较成熟,但由于开发效率和成本的限制,已经越来越无法满足移动互联网应用的开发需求. 所以,具有简单.迅速.跨平台的优势,而且基于Web开发语言和布局技术的React Native得以迅速流行,并一举夺得跨平台开发技术的头筹. 目前市场上大多数React Native书籍主要以翻译和讲解官方文档为主,并未从开发实际应用出发,通过典型案例来指导读

1.2 React Native的特点 那么,作为跨平台应用开发的"新贵",React Native相比其他跨平台技术到底有哪些优势呢?1.2.1 其一:Learn Once, Write Anywhere 这句话是React Native官网(http://facebook.github.io/react-native/)对React Native的概述,简单明了地概括了React Native的最大特点和优点. 只需要学习React Native这一种开发方式(包括平台.语言和开发

1.5 小试牛刀--更改React Native项目源码 应用虽然已经运行起来了,但是到现在还没有看到或修改任何代码,读者是不是觉得意犹未尽呢?下面就来看看React Native项目的源码吧. 打开index.ios.js文件,可以看到与显示在设备上内容直接相关的代码: 01 export default class ch02 extends Component { // 每个页面可以理解成一个组件 02 render() { // 渲染页面的函数 03 return ( 04 // 页面根V

3.5 拖曳刷新列表--RefreshControl组件 在3.4节中,我们完善了商品列表的功能:不仅优化了列表的布局,还添加了分割线等效果.不过,该App还缺少一个常用的功能,那就是拖曳刷新.虽然也可以添加一个"刷新"按钮用于响应用户请求,但是用户体验却没有拖曳好,而且,由于现在移动开发设备屏幕通常较小,额外添加按钮对界面设计影响也较大. ?小知识:用户体验(User Experience,简称UX或UE)是涉及一个人使用一个特定产品或系统或服务的有关行为.态度与情绪.用户体验包括实

3.3 完善轮播广告--Image组件 之前的轮播广告页面显示的是简单的文字和背景色,接下来添加一些好看的图片作为轮播广告. React Native中用于图片显示的组件是Image.Image组件可以显示多种不同类型图片,包括网络图片.静态资源.临时的本地图片,以及本地磁盘上的图片(如相册)等.3.3.1 使用网络图片 这里先使用网络图片来看看Image的用法和效果.修改app.js代码如下: 01 export default class app extends Component { 02

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所示. 回答:

2.5 如何调试React Native项目 在实际开发中,还有一个影响开发效率的重要因素,即调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项Debug JS Remotely选项. (1)晃动设备或使用模拟器上的快捷键(iOS模拟器快捷键command + D,Android模拟器快捷键command + M)打开调试选项,效果如图2.15所示. 图2.15 React Native调试选项 (2)单击Debug JS Rem