React Native onViewableItemsChanged не работает при прокрутке динамических данных

У меня есть React Native FlatList. на основе документации я использовал onViewableItemsChanged для получения текущего отображаемого элемента на экране. но во время прокрутки или при остановке прокрутки ничего не происходит, и я не могу получить текущий идентификатор. Как я могу использовать его правильно?

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

react-native reactjs native-base react-native-flatlist
person S.Hossein Asadollahi    schedule 09.04.2018    source источник
comment
Возможный дубликат Как получить текущий видимый индекс в RN flat список   -  person Balasubramanian    schedule 10.04.2018
comment
мой вопрос отличается от этого.   -  person S.Hossein Asadollahi    schedule 10.04.2018

Ответы (2)


arrow_upward
3
arrow_downward

Я решил проблему сам. Проблема была в том, что я пытался заполнить данные с помощью 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>
    );

};
}
person S.Hossein Asadollahi    schedule 10.04.2018
comment
эта ошибка, по-видимому, связана с использованием других родительских компонентов (контейнер, контент)... - person jdnichollsc; 28.08.2018

arrow_upward
3
arrow_downward

Убедитесь, что вы правильно реализуете keyExtractor (или внедрите его, если у вас нет уже нет).

В моем случае keyExtractor возвращал null для многих дочерних элементов, а onViewableItemsChanged для них не отправлялось.

person SudoPlz    schedule 01.08.2019