再來多介紹一個常會用到的 list 元件
以及到目前的踩雷分享 :P

1. 列表元件 VirtualizedList

   • VirtualizedList 是 Flat List 和 SectionList 的父元件，上述的兩個元件都是透過繼承 VirtualizedList 所產生的元件如果需要其他特殊的功能才會直接使用 VirtualizedList。

   • VirtualizedList 外面不可以包 ScrollView 要包在 SafeAreaView 裡面，若畫面在 ScrollView 裡面需要 list 可以用 map 的方式。

     REACT NATIVE	敘述

     FlatList| Flat List 用來產生列表項目的元件Flat List 利用 lazy load 的方式 render 元件，當畫面滑動到該元件時才會 render 可以減少記憶體占用，可支援手動下拉更新(RefreshControl)當畫面滑出目前的 List 位置時會將記憶體回收，由於會將資料回收，所以當快速滾動畫面時，FlatList 有時候會出現白畫面，元件內可以增加 RefreshControl 元件，當手機畫面按住向下拉的時候可以重整資料。|
     SectionList | 基本上跟 Flat List 差不多，可支援分類的資料組，可自訂每個 Session 開始的 Header、結束後的 Footer 與分隔元件等 |
     ListView | List View 是用來產生 scroll bar 的 View 元件，ListView 底下的所有元件會在第一時間全部 render 出來，速度較快但是也會占用較多記憶體，當資料較多時建議改用 FlatList |

到目前為止雷包分享

• margin：
  RN — 四個周圍數值不同，無法寫在一起。marginTop、marginLeft、marginBottom 以及 marginRight 須各自寫。但我們可以運用之前的那個優化來做調整！
• lineHeight：
  RN — 效果不如預期，lineHeight is less than the fontSize ，目前版本並無修正。
  看到有外國人的解法是 you’ll need to add top padding to the Text element, which you must then compensate for by shifting the element up (e.g. via top plus relative positioning, or a negative marginTop)
  也可以直接用要多寬來寫，直接寫 25 而不是寫 1.5
• ：
  RN — 這種 inline 效果有兩個方法。

1. 可使用 Text 標籤包 Text ，裡面的將會成為 inline 效果。

<Text style={styles.desc}>
    <Text style={styles.heightLine}>西瓜</Text>好吃
</Text>

2. 彈性盒子用 flexDirection 調整成 row 的屬性。

• fontWeight/color/fontSize：
  一定要放在指定標籤上，無法放在 container 一起設定。
  window.innerWidth：使用 Dimensions 來看目前螢幕的寬高
• 按鈕
  Button 標籤無法客製化，需要使用 TouchableOpacity 或是 TouchableNativeFeedback 组件来定制自己所需要的按钮。
• 圖片
  Image 標籤一定要設定寬高，不能使用％
• list
  FlatList 不能在 ScrollView 裡，會出現警告訊息， VirtualizedList 需要包在 SafeAreaView

Day12 done!