Expo SDK 29 FlatList onRefresh不调用

1 回答

• 0

  我有完全相同的问题，我正在使用expo SDK 30.但我的情况有点不同 . 每次拉动时都会调用onRefresh函数，但是如果我向下滚动列表并快速向上滚动，加载指示器会显示，但我的onRefresh函数不会被调用 .

  我的刷新道具是在我的reducer上设置的，我的onRefresh函数调度一个动作来获取数据并设置刷新的true和false .

  这是我的代码：

  class NoticiasScreen extends Component {
    static navigationOptions = {
      header: <Header
                title='Notícias Alego'
                leftComponent={<Image source={require('../../../assets/images/play_grande.png')} style={imageStyle} resizeMode='contain'/>}
              />
    }
  
    constructor(props) {
      super(props);
  
      this.renderItem = this.renderItem.bind(this);
      this.keyExtractor = this.keyExtractor.bind(this);
      this.renderContent = this.renderContent.bind(this);
      this.navigateToNoticias = this.navigateToNoticias.bind(this);
      this.carregarMaisNoticias = this.carregarMaisNoticias.bind(this);
      this.onRefresh = this.onRefresh.bind(this);
    }
  
    componentDidMount() {
      this.props.carregarNoticias(this.props.pagina);
    }
  
    renderItem({item}) {
      return (
        <NoticiaListItem noticia={item} abrirNoticia={this.navigateToNoticias} />
      );
    }
  
    keyExtractor(item) {
      return item.id.toString();
    }
  
    navigateToNoticias(noticia) {
      this.props.navigation.navigate('NoticiasExibir', { id: noticia.id });
    }
  
    onRefresh() {
      console.log('onRfresh');
      this.props.carregarNoticias(1, true);
    }
  
    carregarMaisNoticias() {
      const { carregarNoticias, pagina } = this.props;
      carregarNoticias(pagina + 1);
    }
  
    renderContent() {
      const { noticias, carregandoNoticias, erroNoticias } = this.props;
  
      if(noticias.length === 0 && carregandoNoticias) {
        return (
          <View style={styles.containerCenter}>
            <ActivityIndicator size="large" color={colors.verde}/>
          </View>
        );
      }
  
      if(erroNoticias) {
        return (
          <View style={styles.containerCenter}>
            <Text style={styles.message}>{erroNoticias}</Text>
            <TouchableOpacity hitSlop={hitSlop15}>
              <Text>Recarregar</Text>
            </TouchableOpacity>
          </View>
        )
      }
  
      return (
        [<TextInput
          style={styles.textInput}
          placeholder='Pesquise'
          key='pesquisa'
          underlineColorAndroid='transparent'
        />,
        <FlatList
          data={noticias}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
          style={styles.list}
          key='lista'
          onRefresh={this.onRefresh}
          refreshing={carregandoNoticias}
          onEndReached={this.carregarMaisNoticias}
          onEndReachedThreshold={0.1}
        />]
      )
    }
  
    render() {
      return (
        <SafeAreaView style={styles.safeArea}>
          <View style={styles.container}>
  
            {this.renderContent()}
          </View>
        </SafeAreaView>
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      noticias: state.intranet.noticias,
      pagina: state.intranet.pagina,
      erroNoticias: state.intranet.erroNoticias,
      carregandoNoticias: state.intranet.carregandoNoticias
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      carregarNoticias: (pagina, recarregar) => dispatch(ActionCreator.carregarNoticias(pagina, recarregar))
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(NoticiasScreen);
  

  不知道发生了什么 . 任何帮助表示赞赏 .

  编辑：

  我以某种方式解决了它 . 我添加了onMomentScrollBegin prop以防止我的flatList在Render上呈现两次，并解决了这个问题 .

  这是我添加的内容：

  constructor(props) {
      super(props);
  
      ...
  
      this.onRefresh = this.onRefresh.bind(this);
  
  
      this.onMomentumScrollBegin = this.onMomentumScrollBegin.bind(this);
  
      this.onEndReachedCalledDuringMomentum = true; //PUT THIS HERE
    }
  
  
   onRefresh() {
      this.props.carregarNoticias(1, true);
    }
  
    carregarMaisNoticias() {
      if(!this.onEndReachedCalledDuringMomentum){
        const { carregarNoticias, pagina } = this.props;
        carregarNoticias(pagina + 1);
        this.onEndReachedCalledDuringMomentum = true;
      }
    }
  
    onMomentumScrollBegin() {
      this.onEndReachedCalledDuringMomentum = false;
    }
  
  render() {
    <OptimizedFlatList
      data={noticias}
      renderItem={this.renderItem}
      keyExtractor={this.keyExtractor}
      style={styles.list}
      key='lista'
      onRefresh={this.onRefresh}
      refreshing={carregandoNoticias}
      onMomentumScrollBegin={this.onMomentumScrollBegin} //PUT THIS HERE
      onEndReached={this.carregarMaisNoticias}
      onEndReachedThreshold={0.1}
   />
  }
  

  回复于 2024-05-18T22:59:14+08:00