元件介紹

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 元件

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>
Previous商品管理介面-MerchandiseListNext新建商品頁面-NewMerchandise

Last updated