любые события Scroll, такие как onScroll, не работают с компонентом FlatList - PullRequest
Новая
       13

любые события Scroll, такие как onScroll, не работают с компонентом FlatList

0 голосов
/ 14 сентября 2018

Итак, у меня есть проект, использующий React-Native на iOS, использующий компонент <Flatlist/>, который отображается условно с использованием функции renderContent(), если данные корзины пусты в представлении, например: 

<SafeAreaView style={styles.container}>
    <Navigator.Config
      onAppear={this.handleGetData}
      onDisappear={this.handleOnDisappear}
      rightButtons={deleteButton}
      onRightPress={this.handleDeleteButton}
    >
      {this.renderContent()}
    </Navigator.Config>
  </SafeAreaView>

где функция renderContent() выглядит так: 

renderContent = () => {
const { cart, cart: { cartObject } } = this.props
const { shop_group: shopGroup } = cartObject
if (
  (cart.isNoResult && !cart.isLoadingCartList) ||
  !this.state.isUserLogin ||
  (shopGroup && shopGroup.length < 1 && !cart.isLoadingCartList)
) {
  return this.renderNoResult()
}
return this.renderData()

}

<NoResultView/> компонент 

<View style={{ flex: 1, backgroundColor: 'white' }}>
<View>
  <View style={{ paddingTop: noLogin ? 50 : 30, alignItems: 'center' }}>
    ...

  {
    cartData.isLoadingRecommended == false  ?



      <SuggestionsView title="Rekomendasi" 
        data={cartData.recommended ? cartData.recommended.recommendation : []} 
        renderItem={renderItemRecommended}
        onScroll={handleScroll}
        onEndReached={(info)=>{
          // if(!cartData.isLoadingRecommended && cartData.recommended){
            console.log('----------** END **------------', info, cartData.isLoadingRecommended)
          // }
        }}
      />

    :
    <ActivityIndicator animating size="small" />

  }

</View>

и компонент <FlatList/> отображается внутри `

import { View, Text, Image, FlatList, TouchableOpacity } from 'react-native'
import React, { Component }  from 'react'
import Icon from 'react-native-vector-icons/EvilIcons'
import { ReactTPRoutes } from 'NativeModules'

class SuggestionsView extends Component {
    constructor(props){
        super(props)
        this.state = {
            isRefreshing: false,
            isLoading: false,
            isLoadingMorePost: true,
            hasNextPage: false,
            reachFeedEnd: false,
            shouldDisplayErrorToaster: false,
            isError: false,
          }
}

    handlePressViewAll = () => this.props.onPressViewAll()

    keyExtractor = (item, index) => index;


    render(){
        return (
        <View style={{
            paddingLeft: 16,
            paddingRight: 16,
        }}>


            </View>
            <FlatList
                style={{ flex: 1 }}
                numColumns={2}
                data={this.props.data}
                keyExtractor={this.keyExtractor}
                renderItem={this.props.renderItem}
                onEndReachedThreshold={0.3}
                scrollEventThrottle={16}
                onEndReached={(info)=>{
                    if(this.props.onEndReached){
                        this.props.onEndReached(info)

                    }
                }}
                ref={x => {
                    this.flatist = x // tslint:disable-line
                }}
                onScroll={()=> console.log('test')}
            />
        </View>
        )}
}

экспорт по умолчанию

Хотя по какой-то причине метод onScroll вообще не срабатывает. Метод scrollToEnd также по какой-то причине не срабатывает. Спасибо за любую помощь, спасибо.

...