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.