元件介紹

Text 元件

• 顯示文字

• fontSize 與 color 由 style 進行調整

  • const style = StyleSheet.create({
        text: {
            fontSize: 20,
            color: 'white'
        }
    })

• textDecorationLine

  • enum('none', 'underline', 'line-through', 'underline line-through')

• 過長文字使用，避免影響排版 numberOfLines與 ellipseMode

• 文字本身置於元件的children 而非props

 <Text numberOfLines={1} ellipsizeMode="tail" style={styles.itemText}>
     {item.title}
 </Text>

FlatList v.s ListView

• 並不會render user 看不到的部分，所以在資料量很大時，可以減少記憶體的使用量

• 由於必須推算user 現在滑到哪，所以必須得知每個item 的高度，透過getItemLayout 告知FlatList

FlatList	ListView
當extraData變更時，整個list 重新 render， 但只render user看得到到與即將看到的部分，其餘部分以空白畫面代替，若listItem的高是固定，提供```getItemLayout``` 可以在對效能做進一步的優化 (更快找出需要render 的範圍)	透過rowHasChanged 若有更新只更新受影響的row，隨著item數量的增加，仍會保留過去不在畫面中的item，所以記憶體的佔用量會隨著item 的數量增長

FlatList 元件

export default class FlatListExample {
  state = {
     data: [
       {
         "title": "Example"
       }
     ]
  }

  renderItem = ({item, index}) =>{
    return (
      <View>
        <Text>{item.title}</Text>
      </View>
    )
  }

  keyExtractor = (item) => {
    return item.id
  }

  render(){
    return (<FlatList data={this.state.data} keyExtractor={this.keyExtractor} renderItem={this.renderItem} />)
  }

}

• data

  • 該list 的資料

• renderItem

  • 如何顯示該listItem

  • 留意renderItem 傳入的不是item本身，還有index 等其他資訊

• keyExtractor

  • 告訴FlatList 如何區別個別的 item

  • FlatList 內部用來結合 key使用

• extraData

  • shallow equal 該extraData 中的值，若有變更則頁面更新

• style

  • 同View 的 style ，對FlatList 的大小與margin padding進行設定

  • FlatList 預設與parent 同高

TouchableOpacity, TouchableHighlight 元件

• 因為我們無法這樣使用...

  • <View onPress={()=>{}}>
        <Text>{'Press me !!!'}</Text>
    </View>

• 效果再掛上onPress時才會發生

• 對指定區域進行點擊時使用，同樣擁有View.style 可以等同於對View 使用

• • (TH) underlayColor, activeOpacity

• (TH) 只支持單一節點

<TouchableHighlight
    onLongPress={() => {}}
    onPress={() => {}}
    activeOpacity={0.7}
    underlayColor='#ccc'>
    <View style={styles.listItem}>
      <Image style={styles.thumbnail} source={ { uri: item.picture_url } } />
      <Text numberOfLines={1} ellipsizeMode="tail" style={styles.itemText}>
        {item.title}
      </Text>
    </View>
</TouchableHighlight>

(TO) activeOpacity

• <TouchableHighlight
      onLongPress={() => {}}
      onPress={() => {}}
      activeOpacity={0.7}
      underlayColor='#ccc'>
    <View>
      <Image style={styles.thumbnail} source={ { uri: item.picture_url } } />
      <Text numberOfLines={1} ellipsizeMode="tail" style={styles.itemText}>
        {item.title}
      </Text>
    </View>
  </TouchableHighlight>

TouchableOpacity	TouchableHightlight
降低目標的透明度	目標背景變至指定顏色與指定透明度，會有single children 問題