Question

我使用的是flatlist，其中有一个名为onViewableItemChanged的道具，每次重新呈现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>
    );
}

}

Answer 1

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

只需使用参考：

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

在React Native中重新呈现FlatList时，未调用Flatlist onVIewableItemsChanged道具

1 个答案: