第七篇动手写组件

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

一、最简单的方式

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

lesson8: 自己动手写组件 - 图1

二、循环一个文章列表

  1. 要实现的效果如下图：

lesson8: 自己动手写组件 - 图2

  1. 第一步改造我们的组件
  2. var Article = React.createClass({
  3.     render: function(){
  4.         return (
  5.               <View style={styles.container}>
  6.                 <Text style={[styles.text, styles.title]}>{this.props.title}</Text>
  7.                 <Text style={styles.text}>{this.props.author}</Text>
  8.                 <Text style={styles.text}>{this.props.time}</Text>
  9.               </View>
  10.         );
  11.     }
  12. });
  14. 第二步定义数据model和循环
  15. var App = React.createClass({
  16.       getInitialState: function(){
  17.         var data = [
  18.           {
  19.             title: "React-Native入门指南",
  20.             author: "vczero",
  21.             time: "2015-06-28"
  22.           },
  23.           {
  24.             title: "为什么世界不一样",
  25.             author: "vczero",
  26.             time: "2015-06-8"
  27.           },
  28.           {
  29.             title: "你来，我就告诉你",
  30.             author: "vczero",
  31.             time: "2015-04-01"
  32.           }
  33.     ];
  34.     return {
  35.           articles: data
  36.     };
  37.   },
  38.   render: function(){
  39.     return(
  40.           <ScrollView>
  41.         {this.state.articles.map(function(article){
  42.           return <Article title={article.title} author={article.author} time={article.time}/>
  43.            })}
  44.       </ScrollView>
  45.     );
  46.       }
  47. });
  49. 整个代码如下：

lesson8: 自己动手写组件 - 图3