滚动动态数据时 React Native "onViewableItemsChanged" 不工作

Question

我有一个 React Native FlatList。基于 Documentation 我使用 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>
    );
};
}

Answer 1

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

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

中渲染整个 FlatList

这是我的最终代码：

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>
    );

};
}

Answer 2

确保您正确实施 keyExtractor（如果您尚未实施，则实施）。

在我的例子中，keyExtractor 为许多 children 返回 null，而 onViewableItemsChanged 不会为那些返回 null。

滚动动态数据时 React Native "onViewableItemsChanged" 不工作

React Native "onViewableItemsChanged" not working while scrolling on dynamic data

reactjs

react-native

native-base

react-native-flatlist