Reactjs 不断获得；不支持动态更改onViewableItemsChanged"；

在我的项目中，我有一个（水平）平面列表，我想在新页面可见时触发一个函数。我知道我需要指定viewabilityConfig和onViewableItemsChanged。然而，当我这样做的时候，我一直收到这个错误消息：“不支持动态更改onViewableItemsChanged”

我是个新手，所以在其他帖子上看到同样的错误并没有让我变得更聪明

有什么想法吗

const DATA = [
  20201202 = {
    id: "20201202",
    data: day1,
  },
  2020120 = {
    id: "2020120",
    data: day2,
  },
  20201204 = {
    id: "20201204",
    data: day3,
  },
]; */

const LiveScreen = (props, { navigation }) => {
  const FlatListItem = ({ title }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{title.day}</Text>
    </View>
  );

  // FLATLIST

  const renderFlatList = ({ item }) => <FlatListItem title={item} />;


  

  // VIEWABILITY
  const viewabilityConfig = {
    waitForInteraction: true,
    // At least one of the viewAreaCoveragePercentThreshold or itemVisiblePercentThreshold is required.
    viewAreaCoveragePercentThreshold: 95,
    itemVisiblePercentThreshold: 75,
  };

  return (
    <View style={{ flex: 1, width: "100%", backgroundColor: "#F4F5F5" }}>
      <View style={{ flex: 1 }}>

        <SafeAreaView>
          <FlatList
            horizontal
            pagingEnabled
            data={DATA}
            renderItem={renderFlatList}
            keyExtractor={(item) => item.id}
            initialScrollIndex={5}
            viewabilityConfig={viewabilityConfig}
            onViewableItemsChanged={(viewableItems, changed) => {
              console.log("Visible items are", viewableItems);
              console.log("Changed in this iteration", changed);
            }}
          />
        </SafeAreaView>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({});

export default LiveScreen;

常数数据=[
20201202 = {
id:“20201202”，
数据：第1天，
},
2020120 = {
id:“2020120”，
数据：第2天，
},
20201204 = {
id:“20201204”，
数据：第3天，
},
]; */
const LiveScreen=（道具，{navigation}）=>{
常量FlatListItem=（{title}）=>(
{title.day}
);
//扁平列表
常量renderFlatList=（{item}）=>；
//可视性
常量可视性配置={
waitForInteraction：是的，
//至少需要ViewAreaCoverage PercentThreshold或itemVisiblePercentThreshold中的一个。
ViewArea覆盖率百分比阈值：95，
itemVisiblePercentThreshold:75，
};
返回(
项目id}
initialScrollIndex={5}
viewabilityConfig={viewabilityConfig}
onViewableItemsChanged={（viewableItems，已更改）=>{
console.log（“可见项为”，可见项为）；
log（“本次迭代中已更改”，已更改）；
}}
/>
);
};
constyles=StyleSheet.create（{}）；
导出默认的实时屏幕；

我已经删除了多余的代码

---

提前感谢

需要在构造函数中进行查看能力配置以避免此错误

constructor (props) {
  super(props)

  this.viewabilityConfig = {
      waitForInteraction: true,
      // At least one of the viewAreaCoveragePercentThreshold or itemVisiblePercentThreshold is required.
      viewAreaCoveragePercentThreshold: 95,
      itemVisiblePercentThreshold: 75,
  }
}
<FlatList
    viewabilityConfig={this.viewabilityConfig}
  ...
/>

const viewabilityConfig = useRef({
  waitForInteraction: true,
      // At least one of the viewAreaCoveragePercentThreshold or itemVisiblePercentThreshold is required.
      viewAreaCoveragePercentThreshold: 95,
      itemVisiblePercentThreshold: 75,
})