React Native页面滚动至顶部问题：点击第二列表项失效求助

我来帮你搞定这个滚动难题～之前用字符串refs可能是问题所在，现在React Native更推荐使用useRef（函数组件）或createRef（类组件）来获取组件实例，下面给你几个可行的解决方案：

方法1：改用现代Ref API #

字符串refs已经被废弃，很可能是你没正确拿到ScrollView的实例才导致scrollTo无效。

函数组件版本 #

import React, { useRef } from 'react';
import { Content, ScrollView, View, List, ListItem, Spinner, Header } from 'native-base';

const YourComponent = () => {
  // 创建ref实例
  const listRef = useRef(null);

  // 定义滚动到顶部的函数
  const scrollToTop = () => {
    if (listRef.current) {
      listRef.current.scrollTo({ x: 0, y: 0, animated: true });
    }
  };

  return (
    <Content>
      {/* 替换字符串ref为useRef实例 */}
      <ScrollView ref={listRef}>
        {/* 第一个列表区域 */}
        <View style={{backgroundColor:'#e0e0e0'}}>
          {InvoiceStore.invoice_response2==2?<View>
            {InvoiceStore.invoice.length>0?
              <View style={{width:deviceWidth-(deviceWidth/50), padding:deviceWidth/70,alignSelf:'center',backgroundColor:'white',elevation:5,marginTop:deviceHeight/60,marginBottom:deviceHeight/60}}>
                <List dataArray={InvoiceStore.invoice.slice()} renderRow={(data) =>(
                  data.length!=0 ? <ListItem>...................................................................................................................................................................</ListItem> : <View></View>
                )}>
                </List>
              </View> :<View></View>}
          </View>:<Spinner/>}
        </View>
        <Header style={{backgroundColor:'#d0964b',height:30}}>.......</Header>
        {/* 第二个列表区域，给ListItem添加点击事件触发滚动 */}
        {InvoiceStore.invoice_response2==2?<View>
          {InvoiceStore.invoice.length>0?
            <View style={{width:deviceWidth-(deviceWidth/50), padding:deviceWidth/70,alignSelf:'center',backgroundColor:'white',elevation:5,marginTop:deviceHeight/60,marginBottom:deviceHeight/60}}>
              <List dataArray={InvoiceStore.invoice.slice()} renderRow={(data) =>(
                data.length!=0 ? <ListItem onPress={scrollToTop}>...................................................................................................................................................................</ListItem> : <View></View>
              )}>
              </List>
            </View> :<View></View>}
        </View>:<Spinner/>}
      </ScrollView>
    </Content>
  );
};

类组件版本 #

import React, { createRef } from 'react';
import { Content, ScrollView, View, List, ListItem, Spinner, Header } from 'native-base';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = createRef();
  }

  scrollToTop = () => {
    if (this.listRef.current) {
      this.listRef.current.scrollTo({ x: 0, y: 0, animated: true });
    }
  };

  render() {
    return (
      <Content>
        <ScrollView ref={this.listRef}>
          {/* 第一个列表区域 */}
          <View style={{backgroundColor:'#e0e0e0'}}>
            {InvoiceStore.invoice_response2==2?<View>
              {InvoiceStore.invoice.length>0?
                <View style={{width:deviceWidth-(deviceWidth/50), padding:deviceWidth/70,alignSelf:'center',backgroundColor:'white',elevation:5,marginTop:deviceHeight/60,marginBottom:deviceHeight/60}}>
                  <List dataArray={InvoiceStore.invoice.slice()} renderRow={(data) =>(
                    data.length!=0 ? <ListItem>...................................................................................................................................................................</ListItem> : <View></View>
                  )}>
                  </List>
                </View> :<View></View>}
            </View>:<Spinner/>}
          </View>
          <Header style={{backgroundColor:'#d0964b',height:30}}>.......</Header>
          {/* 第二个列表区域 */}
          {InvoiceStore.invoice_response2==2?<View>
            {InvoiceStore.invoice.length>0?
              <View style={{width:deviceWidth-(deviceWidth/50), padding:deviceWidth/70,alignSelf:'center',backgroundColor:'white',elevation:5,marginTop:deviceHeight/60,marginBottom:deviceHeight/60}}>
                <List dataArray={InvoiceStore.invoice.slice()} renderRow={(data) =>(
                  data.length!=0 ? <ListItem onPress={this.scrollToTop}>...................................................................................................................................................................</ListItem> : <View></View>
                )}>
                </List>
              </View> :<View></View>}
          </View>:<Spinner/>}
        </ScrollView>
      </Content>
    );
  }
}

方法2：尝试scrollToOffset替代scrollTo #

如果scrollTo还是不生效，可以试试ScrollView的scrollToOffset方法，参数更简洁：

const scrollToTop = () => {
  if (listRef.current) {
    listRef.current.scrollToOffset({ offset: 0, animated: true });
  }
};

额外排查点 #

• 检查ScrollView是否设置了contentContainerStyle={{ flex: 1 }}，这种设置可能会导致滚动范围计算异常，去掉这个属性试试。
• 确认ListItem的onPress事件没有被父元素的点击事件覆盖，或者没有被透明元素遮挡，确保点击能正常触发scrollToTop函数。

内容的提问来源于stack exchange，提问作者San Daniel