文章 2017-08-02 来自:开发者社区

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

3.9 小 结截止本章,我们不仅开发了一个电商应用,还对已有的应用进行了以下优化? 代码重构:包括组件的复用、逻辑的简化以及扩展性的优化。? 样式美化:自定制了组件的样式。? 功能完善:为轮播广告添加指示器效果,为商品列表添加图片和详细说明,为应用添加更多React Native提供的组件。本书通过电商App的改造,学习了多个组件的使用,并带入了实际项目开发中的一些技巧...

文章 2017-08-02 来自:开发者社区

《React Native移动开发实战》一一3.6 添加页面跳转功能——Navigator组件

3.6 添加页面跳转功能——Navigator组件React Native实现页面跳转的组件有Navigator以及NavigatorIOS,和前面介绍过的ViewPagerAndroid问题一样,为了考虑平台兼容性和代码复用性,这里使用同时支持iOS和Android的Navigator组件。在正式使用Navigator之前,首先需要对现有的ch04项目做一些简单的重构:将首页的实现移植到新建.....

文章 2017-08-02 来自:开发者社区

《React Native移动开发实战》一一3.7 二级页面的跳转——TouchableOpacity组件

3.7 二级页面的跳转——TouchableOpacity组件理解了Navigator的基本用法之后,下一步,添加一个新的组件,以便实现二级页面跳转的效果。(1)添加新的文件detail.js,并在该文件中创建detail组件,代码如下: 01 import React, {Component} from 'react'; 02 import {StyleSheet, View, ...

文章 2017-08-02 来自:开发者社区

《React Native移动开发实战》一一3.5 拖曳刷新列表——RefreshControl组件

3.5 拖曳刷新列表——RefreshControl组件在3.4节中,我们完善了商品列表的功能:不仅优化了列表的布局,还添加了分割线等效果。不过,该App还缺少一个常用的功能,那就是拖曳刷新。虽然也可以添加一个“刷新”按钮用于响应用户请求,但是用户体验却没有拖曳好,而且,由于现在移动开发设备屏幕通常较小,额外添加按钮对界面设计影响也较大。?小知识:用户体验(User Experience,简称.....

文章 2017-08-02 来自:开发者社区

《React Native移动开发实战》一一3.4 完善商品列表——ListView组件

3.4 完善商品列表——ListView组件在完善了搜索框和轮播广告之后,对电商应用的首页的改造已经初见成效。最后,我们要让商品列表的内容也变得更加丰富。3.4.1 对图片资源进行重构添加商品图片到ch04项目中,相对ch04根目录的文件路径为./product-image-01.jpg。此时,如果不断地添加图片文件的话,根目录的结构会变得越来越“糟糕”,如图3.16所示。这时需要对图片资源...

文章 2017-08-02 来自:开发者社区

《React Native移动开发实战》一一3.2 完善搜索框功能——TextInput组件

3.2 完善搜索框功能——TextInput组件重构代码完毕后,就可以“轻装上阵”,更快更好地为应用添加新功能了。按照之前首页结构的划分,先来看看搜索框。搜索框分为输入框和搜索按钮两部分,如图3.6所示。 图3.6 搜索框的结构用户在输入框输入要搜索的关键字后,单击“搜索”按钮,即可按照输入框中的关键字进行搜索。3.2.1 搜索提示框为了实现这样的效果,可以使用TextInput组件的on...

文章 2017-08-02 来自:开发者社区

《React Native移动开发实战》一一3.1 创建新的电商App

3.1 创建新的电商App之前创建了一个简单的电商项目,本节来实现对该项目的重构。3.1.1 移植旧电商项目(1)先创建React Native项目并安装依赖包。 react-native init ch04 // 新建React Native项目ch04cd ch04npm install // 或者使用cnpm安装:cnpm install...

文章 2017-08-02 来自:开发者社区

《React Native移动开发实战》一一第3章 React Native的组件(1)

第3章 React Native的组件(1)第2章中已经实现了电商应用的首页,虽然界面和功能看起来略简陋了点,但是麻雀虽小,五脏俱全,首页的整体布局和大概效果已经完整地呈现在我们面前了。接下来,在“夯实的地基”上,我们将继续“盖楼”,为应用实现更多的功能和更好的体验。本章主要内容有: 移植旧的App项目。 学会重构现有代码。 完善第2章中的搜索框。 完善第2章中的轮播广告。 完善第2章中的商品.....

文章 2017-08-02 来自:开发者社区

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

2.6 小 结不知不觉中,已经完成了电商类应用首页UI的全部内容,不知道读者是不是越来越喜欢React Native开发了呢?温故而知新,在开始下一步“征程”之前,先来简单梳理下本章学习到的React

文章 2017-08-02 来自:开发者社区

《React Native移动开发实战》一一2.5 如何调试React Native项目

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

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注