《React Native移动开发实战》一一3.3 完善轮播广告——Image组件
3.3 完善轮播广告——Image组件之前的轮播广告页面显示的是简单的文字和背景色，接下来添加一些好看的图片作为轮播广告。React Native中用于图片显示的组件是Image。Image组件可以显示多种不同类型图片，包括网络图片、静态资源、临时的本地图片，以及本地磁盘上的图片（如相册）等。3.3.1 使用网络图片这里先使用网络图片来看看Image的用法和效果。修改app.js代码如下： ...
《React Native移动开发实战》一一3.6 添加页面跳转功能——Navigator组件
3.6 添加页面跳转功能——Navigator组件React Native实现页面跳转的组件有Navigator以及NavigatorIOS，和前面介绍过的ViewPagerAndroid问题一样，为了考虑平台兼容性和代码复用性，这里使用同时支持iOS和Android的Navigator组件。在正式使用Navigator之前，首先需要对现有的ch04项目做一些简单的重构：将首页的实现移植到新建.....
《React Native移动开发实战》一一3.7 二级页面的跳转——TouchableOpacity组件
3.7 二级页面的跳转——TouchableOpacity组件理解了Navigator的基本用法之后，下一步，添加一个新的组件，以便实现二级页面跳转的效果。（1）添加新的文件detail.js，并在该文件中创建detail组件，代码如下： 01 import React, {Component} from 'react'; 02 import {StyleSheet, View, ...
《React Native移动开发实战》一一3.5 拖曳刷新列表——RefreshControl组件
3.5 拖曳刷新列表——RefreshControl组件在3.4节中，我们完善了商品列表的功能：不仅优化了列表的布局，还添加了分割线等效果。不过，该App还缺少一个常用的功能，那就是拖曳刷新。虽然也可以添加一个“刷新”按钮用于响应用户请求，但是用户体验却没有拖曳好，而且，由于现在移动开发设备屏幕通常较小，额外添加按钮对界面设计影响也较大。?小知识：用户体验（User Experience，简称.....
《React Native移动开发实战》一一3.4 完善商品列表——ListView组件
3.4 完善商品列表——ListView组件在完善了搜索框和轮播广告之后，对电商应用的首页的改造已经初见成效。最后，我们要让商品列表的内容也变得更加丰富。3.4.1 对图片资源进行重构添加商品图片到ch04项目中，相对ch04根目录的文件路径为./product-image-01.jpg。此时，如果不断地添加图片文件的话，根目录的结构会变得越来越“糟糕”，如图3.16所示。这时需要对图片资源...
《React Native移动开发实战》一一3.2 完善搜索框功能——TextInput组件
3.2 完善搜索框功能——TextInput组件重构代码完毕后，就可以“轻装上阵”，更快更好地为应用添加新功能了。按照之前首页结构的划分，先来看看搜索框。搜索框分为输入框和搜索按钮两部分，如图3.6所示。 图3.6 搜索框的结构用户在输入框输入要搜索的关键字后，单击“搜索”按钮，即可按照输入框中的关键字进行搜索。3.2.1 搜索提示框为了实现这样的效果，可以使用TextInput组件的on...
《React Native移动开发实战》一一第3章 React Native的组件（1）
第3章 React Native的组件（1）第2章中已经实现了电商应用的首页，虽然界面和功能看起来略简陋了点，但是麻雀虽小，五脏俱全，首页的整体布局和大概效果已经完整地呈现在我们面前了。接下来，在“夯实的地基”上，我们将继续“盖楼”，为应用实现更多的功能和更好的体验。本章主要内容有： 移植旧的App项目。 学会重构现有代码。 完善第2章中的搜索框。 完善第2章中的轮播广告。 完善第2章中的商品.....
如何写出漂亮的React组件
在Walmart Labs的产品开发中，我们进行了大量的Code Review工作，这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇博文里我会分享出我最欣赏的五种组件模式与代码片。不过我首先还是要谈谈为什么我们需要执着于提高代码的阅读体验。就好像你有很多种方式去装扮一只猫，如果你把你的爱猫装扮成了如下这样子: 你或许可以认为萝卜青菜各有所爱，但是代码本身是应当保...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章，它可以在你的React app中，帮助加快初始的加载组件时间。当然这个操作不是完全必要的，但如果你好奇的话，请随意跟随这篇文章一起用Create React App和 react路由4.0的异步加载方式来帮助react.js构建大型应用。 代码分割(Code Splitting) 当我们用react....
编写React组件的最佳实践
在我第一次编写 React 代码的时候，我见发现许多不同的方法可以用来编写组件，不同教程教授的内容也大不相同。尽管从那时候起框架已经相当成熟，但并没有一种固定的“正确”方式指导。 在 MuseFind 工作的一年里，我们的团队编写了许多 React 组件，后期我们对方法进行了优化直到满意为止。 本指南描述了我们推荐的最佳实践，不管你是一名初学者还是有经验的老手，希望它能对你有所...
本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。