如何在FlatList的刷新上突出顯示更新的項目

Question

我設置了一個帶有onRefresh函數的FlatList來更新用戶拖動屏幕時的狀態。 它工作正常，但我想知道如何突出顯示FlatList中刷新后更新的項目。

比方說，例如，我想為列表中已更新的任何項目更改背景幾秒鍾，然后恢復正常。

      <FlatList
        data={scores}
        renderItem={({item}) => (
          <View style={styles.scoreContainer}>
            <ScoreRow data={item.away} />
            <ScoreRow data={item.home} />
          </View>
        )}
        keyExtractor={item => item.gameID}
        refreshing={isRefreshing}
        onRefresh={updateScores}
      />

我能做的最好的事情是在ScoreRow組件中添加一個useEffect，以檢測該組件內是否有變化，但這只允許我一次更新一個組件，而不是整個View。

  const [runUpdate, setRunUpdate] = useState(false)
  const [runs, setRuns] = useState(data.R)

  useEffect(() => {
    if(runs !== data.R) {
      setRunUpdate(true)
      setRuns(data.R)
      setTimeout(() => setRunUpdate(false), 10000)
    }
  }, [data.R])

我無法弄清楚如何在FlatList的視圖中檢測項目的更改，以便我可以按照每個組件的方式更改整個View。

Answer 1

您可以使用FlatList數據來實現此FlatList 。 你必須為此做一個額外的參數。

例如：

//Method to refresh data
    _refreshMethod() {
      // Do your code to fetch...
      ...
      let newDataArray = data // Data fetch from server or some thing.
      let updatedArray = []
      newDataArray.map((data, index) => {
            data["isNewItem"] = true;
            updatedArray.push(data);
      });

      this.setState({scores: updatedArray})
      this._callTimer()
    }



// Method to update new item status after a delay
    _callTimer() {
      setTimeout(function() {
          let updatedArray = []
          this.state.scores.map((data, index) => {
                data["isNewItem"] = false;
                updatedArray.push(data);
          });
          this.setState({scores: updatedArray})
      }, 3000); // The time you want to do...
    }

然后根據狀態值更改行的樣式。

<FlatList
        data={this.state.scores}
        renderItem={({item}) => (
          <View style={item.isNewItem ? styles.yourNewItemStyle :  styles.scoreContainer}>
            <ScoreRow data={item.away} />
            <ScoreRow data={item.home} />
          </View>
        )}
        keyExtractor={item => item.gameID}
        refreshing={isRefreshing}
        onRefresh={updateScores}
        extraData={this.state}
      />