react-native - 任何状态更改时的 FlatList ScrollView 错误 - 不变违规 : Changing onViewableItemsChanged on the fly is not supported

Question

onViewableItemsChanged 当应用程序中的状态发生变化时，它似乎不起作用。这样对吗？
如果是这种情况，似乎它不会很有用....
否则，用户将被迫向我们onScroll为了确定位置或类似的东西......
重现步骤

请引用snack

Repo 也已上传到 github

使用 onViewableItemsChanged 时，任何状态更改都会产生错误

这个错误甚至意味着什么？

注意:放置 onViewableItemsChanged const 中的函数在渲染方法之外也无济于事...

<FlatList
    data={this.state.cardData}
    horizontal={true}
    pagingEnabled={true}
    showsHorizontalScrollIndicator={false}
    onViewableItemsChanged={(info) =>console.log(info)}
    viewabilityConfig={{viewAreaCoveragePercentThreshold: 50}}
    renderItem={({item}) =>
        <View style={{width: width, borderColor: 'white', borderWidth: 20,}}>
            <Text>Dogs and Cats</Text>
        </View>
    }
/>

实际行为
错误

Answer 1

基于@woodpav 评论。使用功能组件和 Hook。
分配两个 viewabilityConfig和 onViewableItemsChanged引用并使用这些。像下面这样:

  const onViewRef = React.useRef((viewableItems)=> {
      console.log(viewableItems)
      // Use viewable items in state or as intended
  })
  const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 })


<FlatList
      horizontal={true}
      onViewableItemsChanged={onViewRef.current}
      data={Object.keys(cards)}
      keyExtractor={(_, index) => index.toString()}
      viewabilityConfig={viewConfigRef.current}
      renderItem={({ item, index }) => { ... }}
/>