React-Native入门指南

第七篇动手写组件

React-Native的核心思想就是组件化，相当于MVC的view,因此开发应用的最佳方式就是将功能组件化。

一、最简单的方式

这里我们实现一个最简单的组件，就是邮件的末尾署名的组件。组件意味着复用，意味着统一。现在有这样一个需求，我们需要根据不同用户发送邮件时，生成每个用户的名片（即邮件末尾的署名）。1、一般一开始的实现方式如下，直接将组件内容写到功能需求的地方：
<View><View>..........这里是当前邮件组的其它功能</View><View><Text>框架研发部</Text><Text>www.ctrip.com</Text></View>
</View>2、有一天，其它的部门的同事提出他们也需要在其他的地方，增加他们的邮件署名，那么你是否又会复制一份代码呢，当然不是，我们可以组件化：
var Email = React.createClass({render: function(){return (<View style={styles.container}><Text style={styles.text}>{this.props.name}</Text><Text style={styles.text}>{this.props.url}</Text></View>);}
});3、整体的代码如下：

二、循环一个文章列表

要实现的效果如下图：

第一步改造我们的组件
var Article = React.createClass({render: function(){return (<View style={styles.container}><Text style={[styles.text, styles.title]}>{this.props.title}</Text><Text style={styles.text}>{this.props.author}</Text><Text style={styles.text}>{this.props.time}</Text></View>);}
});第二步定义数据model和循环
var App = React.createClass({getInitialState: function(){var data = [{title: "React-Native入门指南",author: "vczero",time: "2015-06-28"},{title: "为什么世界不一样",author: "vczero",time: "2015-06-8"},{title: "你来，我就告诉你",author: "vczero",time: "2015-04-01"}];return {articles: data};
},
render: function(){return(<ScrollView>{this.state.articles.map(function(article){return <Article title={article.title} author={article.author} time={article.time}/>})}</ScrollView>);}
});整个代码如下：

转载于:https://my.oschina.net/vczero/blog/471960

React-Native入门指南——第七篇动手写组件相关推荐

React Router入门指南
by Nader Dabit 纳德·达比特(Nader Dabit) React Router入门指南 (Beginner's Guide to React Router) Or what I wis ...
React Native 入门实战视频教程（36 个视频）
React Native 入门实战视频教程(36 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示 ...
React Native 入门实战视频教程（37 个视频）
我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. React Native 入门实战视频教程(37 个视频) 从零开始入门学习 React Native 开发,手把手教你写 App 项目 # ...
React Native 入门实战视频教程（4 个视频）
React Native 入门实战视频教程(4 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示在 ...
React Native使用指南-原生UI组件
在如今的App中,已经有成千上万的原生UI部件了--其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多.React Native已经封装了大部分最常见的组件,譬如Scr ...
React Native学习指南
本篇汇集了React从入门到精通的各种技术,是你学习RN的指南 . 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! ...
React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
【OpenCV入门指南】第九篇灰度直方图均衡化
<OpenCV入门指南>系列文章地址: http://blog.csdn.net/morewindows/article/category/1291764 转载请标明出处,原文地址:htt ...
给iOS开发者的React Native入门使用教程
目录一. 原生iOS项目集成React Native 二. 原生跳转RN页面三. 显示豆瓣热门电影列表四. 改为导航五.完整源代码一. 原生iOS项目集成React Native 创建一个新 ...
React Native JSBundle拆包之原理篇
概述 RN作为一款非常优秀的移动端跨平台开发框架,在近几年得到众多开发者的认可.纵观现在接入RN的大厂,如qq音乐.菜鸟.去哪儿,无疑不是将RN作为重点技术栈进行研发. 不过,熟悉RN的开发者也知道, ...

React-Native入门指南——第七篇动手写组件

React-Native入门指南

第七篇动手写组件

一、最简单的方式

二、循环一个文章列表

React-Native入门指南——第七篇动手写组件相关推荐

最新文章

热门文章