React Native “onViewableItemsChanged” not working while scrolling on dynamic data

问题

I have a React Native FlatList. base on Documentation I used onViewableItemsChanged for getting the current showing item on the screen. but while scrolling or when scrolling stops nothing happens and I can't get the current Id. How Can I use it in correct way?

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

回答1:

I solved the problem myself. The problem was because of I was trying to populate the data with Ajax. To solve that I ran the request from the Parent component and passed it in props and inside the constructor of the class if filled the state for my array.

Another thing that you should consider is that you should render the whole FlatList inside a View.

here is my final code:

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

};
}

回答2:

Make sure that you implement keyExtractor correctly (or implement it if you haven't already).

In my case keyExtractor was returning null for many children, and onViewableItemsChanged would not dispatch for those.

来源：https://stackoverflow.com/questions/49737287/react-native-onviewableitemschanged-not-working-while-scrolling-on-dynamic-dat

标签

reactjs

react-native

native-base

react-native-flatlist