react-native 平面列表圖像在列表 state 更新時閃爍

Question

我用從 Google 的firebase后端獲取的數據填充了一個FlatList 。 實現是相當標准的，這是一個精簡版：

export default class Day extends Component {

state = { data : [], today: false }


componentWillMount = async () => {

    const { today } = this.state;
    const { calendarDb } = this.props

    await calendarDb.onNewAgenda({ 
          day : today
        , then: this.parseOnListed 
    })
}

parseOnListed = blob => {

    const { data } = this.state;
    data.push(blob)
    this.setState({ data: data })
}


renderItem = ({ item }) => 
    <Hour data = {item}/>


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

}

問題是每次將新的blob推入data時， <Hour data={item}/>中的<Image/>組件都會閃爍。 這使得該列表在用戶體驗方面成為禁忌。 是什么賦予了？ <Hour/>也是標准的，大致如下所示：

const Hour = ({ data }) => 
   <View>
       <Image source={{uri:data.uri}}/>
       <Text> {data.name} </Text>
   </View>

<Text>的內容不會閃爍，只有來自<Image.../>的圖像

Answer 1

檢查keyExtractor是否正在獲取唯一 ID。 平面列表在狀態更新時重新渲染，並再次下載圖像。 因為，每一行都沒有像@Guruparan Giritharan 在評論中所說的那樣唯一標識。

Answer 2

我發現了觸發此問題的另一個原因，即 FlatList 在 React native 上閃爍。 就我而言，每次我更新/更改任何 function 組件的 state 時都會發生這種情況。 因此，例如，我將獲取結果（數據）和下一頁 ID（用於下一個分頁獲取）保存在兩個單獨的 function 組件中：

const [data, setData] = useState([]);
const [pageId, setPageId] = useState(null);

因此，每次捕獲我的提取結果時，我都會先設置數據更新，然后再設置頁面 ID。 這是導致閃爍的頁面 ID 更新。

const onEndReachedFetch = async () ={
    fetch(pageId).then(result => {
        setData(result.Data);
        setPageId(result.pageId);
    });
}

修復只是將 state 數據放在一起，因此只有一個更新。 然后在向列表中添加新項目時反應很高興並且不會閃爍。

const onEndReachedFetch = async () ={
    fetch(pageId).then(result => {
        setResult(result);
    });
}

當心您可能正在后台更新的任何側面狀態，因為如果它們被 FlatList 上的任何內容觸發，它們也可能導致閃爍。