2015
Sep
25

如何在 React-Native 使用回圈来 Render

Tags:
繁中版

网页好读版

React render HTML 方式，是把 JS 与 HTML , CSS Style 混在一起写，所以刚开始使用的时候常常用方式，造成程式错误，这篇文章会说明 React Render 部分的写法。

Single ForLoop

先来介绍如何用单层回圈来 Render 一个列表，方法很简单，去 React 官网也可以找到很多范例，只要用大括号 "{}" 就能完成这个功能。

{list.map(function (val, index) { ... } }

来写一段 React 程式码，我希望能够水平显示出一排图片，就像下面这个 Demo 页。


以下是实作的原始码：

Single for loop render 
  1. render: function() {
  2.     var img = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/p50x50/10390028_10102210419817761_5871103530921178170_n.jpg?oh=2250e4b8512bcdb3cd20675cd0fc7c76&oe=569E6D23&__gda__=1453290568_8a1813e8716960d2912d543217bbf197";
  3.     var list = [{},{},{},{},{},{},{},{},{},{}];
  4.     var name = "Mark Zuckerberg";
  5.     return (
  6.         <View style={{height: 500, with: 500, flex: 1, alignItems: 'center', justifyContent: 'flex-start', flexDirection: 'row', flexWrap: "wrap", marginTop: 180, marginLeft: 20}}>
  7.           {list.map(function (val, index) {
  8.               if (name.length > 5) {
  9.                   name = name.substr(0, 5);
  10.               }
  11.               return <View style={{textAlign: "center", width: 49, borderWidth: 2, borderColor: "#000", borderStyle: "solid"}}>
  12.                          <Image
  13.                              source={{uri: img}}
  14.                              style={{width: 45, height: 45}}
  15.                          />
  16.                          <Text style={{textAlign: "center", fontSize: 10, weight: "bold", color: "#aaaa00", width: 49}}> {name} {index} </Text>
  17.                      </View>
  18.           })}
  19.         </View>
  20.     );
  21.   }

Double Forloop

上一个范例中只有单纯的一排图片，当图片超过萤幕的宽度时，图片会自动换到下一行，如果我希望一排最多只放五张图片，这时就可以改用 Double Forloop 来实现。

Demo 图：

这个范例我多加了一些 CSS ，美化一下排版，以下是实作的原始码：

Double Forloop 
  1. var movie = React.createClass({
  2.   render: function() {
  3.     var img = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/p50x50/10390028_10102210419817761_5871103530921178170_n.jpg?oh=2250e4b8512bcdb3cd20675cd0fc7c76&oe=569E6D23&__gda__=1453290568_8a1813e8716960d2912d543217bbf197";
  4.     var list = [];
  5.     list.push([{},{},{},{},{}]);
  6.     list.push([{},{},{},{},{}]);
  7.     var name = "Mark Zuckerberg", template;
  8.     return (
  9.         <View style={{marginTop: 80, flex: 0}}>
  10.           {list.map(function (l, index) {
  11.               return (
  12.                 <View style={{flex: 1, height: 70, justifyContent: 'space-around', flexDirection: 'row', flexWrap: "wrap", marginBottom: 20}}>
  13.                     {l.map(function (val, index2) {
  14.                       if (name.length > 4) {
  15.                           name = name.substr(0, 4);
  16.                       }
  17.                       return <View style={{textAlign: "center", borderWidth: 2, borderColor: "#066", borderStyle: "solid"}}>
  18.                                  <Image
  19.                                      source={{uri: img}}
  20.                                      style={{width: 45, height: 45}}
  21.                                  />
  22.                                  <Text style={{textAlign: "center", fontSize: 10, weight: "bold", color: "#aaaa00", width: 45}}> {name} {index} {index2} </Text>
  23.                              </View>
  24.                     })}
  25.                 </View>
  26.               );
  27.           })}
  28.         </View>
  29.     );
  30.   }
  31. });

Multi function render

上面的范例中，render function 的程式码很长，因为每个 Forloop 程式都塞到同一个 function 里，这样降低了程式的可读性，所以我再把一个 render function ，切出两个 renderList 与 renderPerson function。

实作程式码如下：

Multi function render 
  1. /** Render **/
  2.     render: function() {
  3.         var self = this;
  4.         var img = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/p50x50/10390028_10102210419817761_5871103530921178170_n.jpg?oh=2250e4b8512bcdb3cd20675cd0fc7c76&oe=569E6D23&__gda__=1453290568_8a1813e8716960d2912d543217bbf197";
  5.         var list = [];
  6.         list.push([{},{},{},{},{}]);
  7.         list.push([{},{},{},{},{}]);
  8.         var name = "Mark Zuckerberg";
  9.         return (
  10.             <View style={{marginTop: 80, flex: 0}}>
  11.               {list.map(function (l, index) {
  12.                  return self.renderList(l, img, name, index);
  13.               })}
  14.             </View>
  15.         );
  16.     },
  17.     renderList: function (l, img, name, index) {
  18.       var self = this;
  19.       return (
  20.         <View style={{flex: 1, height: 70, justifyContent: 'space-around', flexDirection: 'row', flexWrap: "wrap", marginBottom: 20}}>
  21.             {l.map(function (val, index2) {
  22.               return self.renderPerson(img, name, index, index2);
  23.             })}
  24.         </View>
  25.       );
  26.     },
  27.     renderPerson: function (img, name, index, index2) {
  28.           if (name.length > 4) {
  29.               name = name.substr(0, 4);
  30.           }
  31.           return <View style={{textAlign: "center", borderWidth: 2, borderColor: "#066", borderStyle: "solid"}}>
  32.                      <Image
  33.                          source={{uri: img}}
  34.                          style={{width: 45, height: 45}}
  35.                      />
  36.                      <Text style={{textAlign: "center", fontSize: 10, weight: "bold", color: "#aaaa00", width: 45}}> {name} {index} {index2} </Text>
  37.                  </View>
  38.     }

网页好读版

This post was last modified by puritys

Copyright &copy; 2014 PURITYS.COM. All rights reserved.