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视图中检测项目的变化，以便我可以像处理每个组件一样更改整个视图。

Answer 1

您可以通过使用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}
      />

如何在FlatList的刷新上突出显示更新的项目

1 个答案: