[ 卡卡 DAY 12 ] - React Native UI 元件（component） 介绍（下）

再来多介绍一个常会用到的 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!