当使用 react-native-pull-to-refresh 包裹 ScrollView 组件时，scrollviewref.current.scrollToEnd() 不起作用答案

【问题标题】：When ScrollView Component is wrapped with react-native-pull-to-refresh, scrollviewref.current.scrollToEnd() is not working当使用 react-native-pull-to-refresh 包裹 ScrollView 组件时，scrollviewref.current.scrollToEnd() 不起作用
【发布时间】：2021-09-16 06:31:40
【问题描述】：

我有一个滚动视图组件，当我包裹 react-native-pull-to-refresh 时，无论它被引用到向下滚动的任何位置都不会触发。以下是相同的代码，

<PTRView onRefresh={fetchMoreMessages}>
      <ScrollView
        ref={scrollviewref}
        onScroll={onScroll}
        scrollEventThrottle={16}
        // onContentSizeChange={() =>
        //   scrollviewref.current.scrollToEnd({animated: true})
        // }
        >
       
        <View style={{padding: 10, paddingBottom: 70}}>
          {message && displayMessageList(message)}

          {selectsymptomcontent &&
            selectsymptomcontent.output &&
            renderSelectSymptomCard()}

          {nextpageaction !== 'dummytext' && renderNextPageSymptom()}

          {posting == true &&
            'dummytext' != selectsymptomcontent &&
            nextpageaction !== 'dummytext' && (
              <Text style={{fontSize: 15}}>
                Checking your response, please hold on
                <AnimatedEllipsis />
              </Text>
            )}
        </View>
       
        {loadingmessages === true && (
          <View
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              position: 'absolute',
              backgroundColor: '#F5FCFF88',
              bottom: 0,
              left: 0,
              top: 0,
              right: 0,
            }}>
            <ActivityIndicator size="small" color="#000" />
          </View>
        )}
     
      </ScrollView>
     
      </PTRView>
      {scrollToBottom==true && (
          <TouchableOpacity style={{position:'absolute',bottom:'10%',right:'5%'}} onPress={()=>{
            console.log('HHHHHhHH')
            scrollviewref?.current.scrollToEnd({animated: true})
            }}>
          <AntDesignIcon name="downcircle" size={30} color="rgba(0,0,0,0.3)"/>
      </TouchableOpacity>
      )}

在这里，在 TouchableOpacity 的回调中，控制台正在打印，但是第二行不起作用。

另外，最初我希望滚动视图指向底部，因此我也有以下代码，但即使是没有触发，除了打印正常的控制台。

 if(scrollviewref &&scrollviewref.current && scrollviewref.current!=undefined && scrollviewref.current!==null && scrollviewref.current.scrollToEnd && scrollviewref.current.scrollToEnd!==null && moreClicked==false){
      console.log('pppppppppp')
      setTimeout(()=>{
        if(scrollviewref &&scrollviewref.current && scrollviewref.current!=undefined && scrollviewref.current!==null && scrollviewref.current.scrollToEnd && scrollviewref.current.scrollToEnd!==null && moreClicked==false){
          scrollviewref.current.scrollToEnd({animated: true})
        }        
      },1000)      
      console.log('hhhhhhh')
    }

这是一个非常奇怪的情况，我不知道如何解决，请在这里帮助我，任何线索都会很棒。

【问题讨论】：

我建议使用 RefreshControl 而不是 react-native-pull-to-refresh 等第三方组件
是的，谢谢，我已经这样做了，它似乎工作正常
你是用 RefreshControl 做的吗？
是的，我做到了@MajidLotfinia

标签： reactjs react-native react-native-android scrollview react-native-ios

【解决方案1】：

我建议使用 RefreshControl 而不是 react-native-pull-to-refresh 等第三方组件

【讨论】：