当 ScrollView 组件被 react-native-pull-to-refresh 包裹时，scrollviewref.current.scrollToEnd() 不工作

Question

我有一个 scrollview 组件，当我环绕 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 的回调中，正在打印控制台，但是第二行不起作用。

另外，一开始我想让scrollview指向底部，因此我也有以下代码，但即使是这样也不会触发，除了打印正常的控制台。

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

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

Answer 1

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

当 ScrollView 组件被 react-native-pull-to-refresh 包裹时，scrollviewref.current.scrollToEnd() 不工作

When ScrollView Component is wrapped with react-native-pull-to-refresh, scrollviewref.current.scrollToEnd() is not working

scrollview

reactjs

react-native

react-native-android

react-native-ios