React Native 奇幻之旅(5)-內建組件 FlatList

1 年前

內容目錄 隱藏

1 The same orientation warning

1.1 解決方法

2 Infinite scroll

2.1 onEndReached 總是在 render 時自動觸發

這篇分享的是 FlatList 使用上常常會遇到的問題和解決方式。

The same orientation warning

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

這個警告是在說同個組件中不能有多個相同方向的 VirtualizedLists 同時存在（如 FlatList 或 SectionList）

比如下面這個例子就會出現這個警告：

<ScrollView contentContainerStyle={styles.container}>
  <Text>O.O</Text>
  <FlatList
    data={list}
    renderItem={({ item }) => <Text>{item.title}</Text>}
    keyExtractor={({ id }) => id.toString()}
  />
  //...
</ScrollView>

解決方法

將除了 FlatList 以外的內容放在 ListHeaderComponent, ListFooterComponent

   <FlatList
       ListHeaderComponent={
          <Text>O.O</Text>
        }
       data={list}
       renderItem={({ item }) => <Text>{item.title}</Text>}
       keyExtractor={({ id }) => id.toString()}
   />

2. 用 map 取代 FlatList

應該是最常見的解決方式

<ScrollView contentContainerStyle={styles.container}>
  <Text>O.O</Text>
  {list.map(({ id, title }) => (
    <Text key={id}>{title}</Text>
  ))}
  //...
 </ScrollView>

3. 雙層 ScrollView 法

為了消除警告無所不用其極XD

<ScrollView contentContainerStyle={styles.container}>
   <Text>O.O</Text>
   <ScrollView horizontal={true} contentContainerStyle={{ width: '100%', height: '100%' }}>
     <FlatList
       data={list}
       renderItem={({ item }) => <Text>{item.title}</Text>}
       keyExtractor={({ id }) => id.toString()}
     />
   </ScrollView>
 </ScrollView>

4. 眼不見為淨法(x)

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['VirtualizedLists should never be nested'])

Infinite scroll

若要實現滾動加載資料，需要用到 FlatList 提供的這兩個屬性：

onEndReached：滾動到底部時觸發的函數
onEndReachedThreshold：距離底部還有多遠時觸發 onEndReached (是一個比值)，設為 0.2 則表示距離內容最底部為當前列表可見長度的 20% 時觸發 onEndReached

這邊以使用 https://picsum.photos/v2/list?page=${page}&limit=${limit} API 為例，每次滾動到底部時就會調用 fetchMoreData 函數，並調用 API 獲取下一頁的數據。

import { useState } from "react"
import { StyleSheet, View, FlatList, Text, ScrollView, Image } from "react-native"

interface ImageProps {
  id: string
  author: string
  width: number
  height: number
  url: string
  download_url: string
}

export const ListPage = () => {
  const [data, setData] = useState<ImageProps[] | []>([])
  const [page, setPage] = useState(0)

  const fetchMoreData = () => {
    fetch(`https://picsum.photos/v2/list?page=${page}&limit=10`)
      .then(res => res.json())
      .then(res => {
        setData(prev => ([...prev, ...res]))
        setPage(page + 1)
      })
  }

  return (
      <View style={styles.list}>
        <FlatList
            contentContainerStyle={{ flexGrow: 1 }}
            data={data}
            ItemSeparatorComponent={() => <View style={styles.divider} />}
            renderItem={({ item }) => <Image source={{ uri: item.download_url }} style={{ width: 100, height: 100 }} />}
            keyExtractor={({ id }) => id}
            onEndReachedThreshold={0.2}
            onEndReached={fetchMoreData}
        />
      </View>
  )
}

const styles = StyleSheet.create({
  list: {
    width: 300,
    height: 200,
    backgroundColor: 'white'
  },
  divider: {
    height: 1,
    backgroundColor: 'black'
  }
})

當然這只是最基本的寫法，因為還需要考慮還有沒有剩餘的資料可以獲取，如果沒有更多的資料就不再繼續調用函數。

onEndReached 總是在 render 時自動觸發

像上面的例子設置了 onEndReachedThreshold 為 0.2，但其實 FlatList 會在剛渲染的時候就自動觸發 onEndReached：

const onEndReached = () => {
  console.log('A')
}

return(
    <FlatList
      onEndReachedThreshold={0.2}
      onEndReached={onEndReached}
      {...}
    />
)

解決方法

這是因為在初始渲染時無法得知 FlatList 準確的大小和位置，所以才會誤觸 onEndReached。StackOverflow 上針對這個bug有很多討論，比較常見的解決辦法是當 distanceFromEnd > 0 的時候再去調用 onEndReached 方法：

<FlatList
  onEndReachedThreshold={0.2}
  onEndReached={({ distanceFromEnd }) => {
    if (distanceFromEnd > 0) {
      onEndReached()
    }
  }}
/>

distanceFromEnd 是用戶滾動到列表底部時，列表底部距離可見區域底部的距離。

在 FlatList 初渲染且不知道大小的情況下，distanceFromEnd 可能為 0 或者非常小的值，所以將 distanceFromEnd 設為大於 0 再去調用 onEndReached 就能夠避免在初始渲染時不小心觸發。

或者也可以把 onEndReached 替換為 onMomentumScrollEnd，在用戶停止滾動並且滾動動畫完成後才觸發 onEndReached：

<FlatList
  onEndReachedThreshold={0.2}
  onMomentumScrollEnd={onEndReached}
/>

getItemLayout 屬性

這是 FlatList 的一個屬性，常用於優化。FlatList 需要事先渲染過一次，動態獲取渲染尺寸之後再真正渲染到頁面中，如果事先知道列表中的每一項高度就能使用 getItemLayout 减少一次渲染。

const ITEM_HEIGHT = 40 // 假設每一項高度固定為 40

<FlatList
  // ...
  getItemLayout={(_, index) => (
    {
      length: ITEM_HEIGHT,
      offset: ITEM_HEIGHT * index,
      index
    }
  )}
/>

注意：如果設了 getItemLayout，那麼 renderItem 的高度必須和這個高度一樣，否則加載一段列表後就會出現空白或跑版。

性能對比

同樣的資料 render 耗時：

沒有使用 getItemLayout	使用 getItemLayout

14.3ms	13.7ms

這是測試的程式碼：

import { useState } from "react"
import { StyleSheet, View, FlatList, Text, ScrollView, Image } from "react-native"

interface ImageProps {
  id: string
  author: string
  width: number
  height: number
  url: string
  download_url: string
}

const ITEM_HEIGHT = 100

export const ListPage = () => {
  const [data, setData] = useState<ImageProps[] | []>([])
  const [page, setPage] = useState(0)

  const fetchMoreData = () => {
    fetch(`https://picsum.photos/v2/list?page=${page}&limit=10`)
      .then(res => res.json())
      .then(res => {
        setData(prev => ([...prev, ...res]))
        setPage(page + 1)
      })
  }

  return (
      <View style={styles.list}>
          <FlatList
            contentContainerStyle={{ flexGrow: 1 }}
            data={data}
            ItemSeparatorComponent={() => <View style={styles.divider} />}
            getItemLayout={(_, index) => (
              { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
            )}
            renderItem={({ item }) => <Image source={{ uri: item.download_url }} style={{ width: 100, height: 100 }} />}
            keyExtractor={({ id }) => id}
            onEndReachedThreshold={0.2}
            onEndReached={fetchMoreData}
          />
      </View>
  )
}

const styles = StyleSheet.create({
  list: {
    width: 300,
    height: 200,
    backgroundColor: 'white'
  },
  divider: {
    height: 1,
    backgroundColor: 'black'
  }
})

優化這種簡單的資料其實效果甚微XD