react-native - 在 React Native 中重新渲染 FlatList 时，未调用 Flatlist onVIewableItemsChanged 属性

Question

我正在使用 flatlist ，其中有一个名为 onViewableItemChanged 的​​道具，每次重新渲染 flatlist 时都需要调用它。但是，即使由于 flatlist 更新而导致 flatlist 数据发生变化，但仅当在可视区域中添加新行（即最初 6 行，然后添加一个新行，然后将被调用）或用户交互（即滚动列表）时才会调用 onViewableItemsChanged 道具。

但如果第 1 行有 20 行和数据更新，则不会调用它。

有什么办法可以解决这个问题。？提前谢谢。

export default class App extends Component<{}> {

constructor(props) {
    super(props);
    this.state = {
        cardData: [{name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
        {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
        {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
        {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
        {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
        {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
        {name: 'Clean Up the Oceans'}, {name: 'three'}]
      }

    this.handleViewableItemsChanged = this.handleViewableItemsChanged.bind(this)
    this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 50}
}

handleViewableItemsChanged(info) {
  console.log(info)
  console.log("potato")
}

render() {
    return (
        <View style={styles.container}>
            <Button
              title="Some State Change Button"
              onPress={()=>
                this.setState({
                  cardData: [{name: 'Clean Up the FOREST'}, {name: 'three'},{name:'true'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},{name:'true'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'},
                  {name: 'Clean Up the Oceans'}, {name: 'three'}
                ]})
              }
            />
            <FlatList
                ref='FlatList'
                data={this.state.cardData}
                extraData={this.state.cardData}
                horizontal={false}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}
                onViewableItemsChanged={this.handleViewableItemsChanged}
                viewabilityConfig={this.viewabilityConfig}

                renderItem={({item}) =>
                    <View style={{width: width, borderColor: 'white', borderWidth: 20,backgroundColor:'yellow'}}>
                        <Text>{item.name}</Text>
                        <Text>Hello World</Text>
                    </View>
                }
            />
        </View>
    );
}

}

标签： react-nativereact-native-flatlist

Answer 1

当您更改数据或重新呈现平面列表时会发生这种情况。

只需使用参考：

const handleViewableItemsChanged = useRef(({ viewableItems }) => { //todo });
.
.
.
<FlatList
  ...
  onViewableItemsChanged={handleViewableItemsChanged.current}
  ...
/>