滚动动态数据时，React Native“onViewableItemsChanged”不起作用

IT技术 reactjs react-native native-base react-native-flatlist
2021-05-06 13:44:29

我有一个 React Native FlatList。基于我使用onViewableItemsChanged获取屏幕上当前显示项目的文档。但是在滚动或滚动停止时什么也没有发生，我无法获得当前的 ID。如何以正确的方式使用它？

export default class TimeLine extends Component {
constructor(props) {
    super(props);
    this.renderTimeline = this.renderTimeline.bind(this);
    this.state = {
        timeline: [],
    };
    this.handleViewableItemsChanged = this.handleViewableItemsChanged.bind(this);
    this.viewabilityConfig = {
        itemVisiblePercentThreshold: 50,
    };
}
...
renderTimelineList(timeline_data) {


    return (

        <Card key={timeline_data.unique_id}>
            <CardItem style={styles.header}>
                <Left>
                    <Icon type="MaterialIcons" name={this.timelineIcon(timeline_data.type)}/>
                    <Body>
                    <Text style={styles.header_title}>{timeline_data.title}</Text>

                    </Body>
                </Left>
            </CardItem>

            <CardItem>
                {this.renderTimeline(timeline_data)}
            </CardItem>

            <CardItem>
                <Left>
                    <Icon small name="time" style={styles.small_font}/>
                    <Text note style={styles.small_font}>{timeline_data.release_date}</Text>
                </Left>
                <Right>
                    <Text note style={styles.small_font}>{timeline_data.duration}</Text>
                </Right>
            </CardItem>
        </Card>
    );


}
render() {
    return (
        <Container>
            <Content>
                <FlatList
                    key={this.state.key}
                    onViewableItemsChanged={this.handleViewableItemsChanged}
                    viewabilityConfig={this.viewabilityConfig}
                    data={this.state.timeline}
                    renderItem={({item}) => this.renderTimelineList(item)}
                />
            </Content>
        </Container>
    );
};
}
2个回答

我自己解决了这个问题。问题是因为我试图用Ajax填充数据。为了解决这个问题，我运行了来自Parent组件的请求，并将它传递到类props 的构造函数中，如果填充了我的数组的状态。

您应该考虑的另一件事是您应该FlatList在View.

这是我的最终代码：

export default class TimeLine extends Component {
constructor(props) {
    super(props);
    this.viewabilityConfig = {
        minimumViewTime: 500,
        viewAreaCoveragePercentThreshold: 60,
    };
}
render() {
    const {timeline} = this.state;
    return (
        <View style={styles.container}>
            <FlatList
                data={timeline}
                renderItem={({item}) => this.renderTimelineList(item)}
                viewabilityConfig={this.viewabilityConfig}
                onViewableItemsChanged={({viewableItems}) => this.handleViewableItemsChanged(viewableItems)}
            />
        </View>
    );

};
}

确保你正确地实现了keyExtractor（或者如果你还没有实现它）。

在我的情况下keyExtractor，许多孩子都返回 null，并且onViewableItemsChanged不会为这些孩子派遣。

其它你可能感兴趣的问题
上一篇React Native：如何在组件中添加脚本标签 下一篇Firebase - 一小时后丢失身份验证会话