React Native+TypeScript：按钮点击无法滚动至指定区块问题排查

我希望点击按钮后滚动到包含问题列表的区块，但当前点击按钮无任何滚动效果。以下是用到的三个文件代码：

home.tsx

const scrollRef = useRef<SectionList>(null)

<Questions
 questions={question}
 ref={scrollRef}
/>

<AnotherComponent .... />
.....

 <ButtonCard
   goToQuestions={() => {
    scrollRef.current?.scrollToLocation({ animated: true, itemIndex: 0, sectionIndex: 0, viewOffset: 0 })
   }}
 />

Questions.tsx

interface Props {
 refLic?: React.RefObject<SectionList<any, DefaultSectionT>>
}
...
...
  <SectionList
    key='questions'
    ref={refLic}
    renderItem={({ item }) => item}
    sections={[
      {
        title: '',
        data: [
          <List.Section title='Questions' titleStyle={styles.title}>
            <FlatList
              data={questions.body.slice(0, itemsToShow)}
              renderItem={renderItem}
            />
          </List.Section>
        ]
      }
    ]}
  />

ButtonCard.tsx

interface Props {
 goToQuestions: () => void
}
...
...

<TouchableOpacity
   onPress={goToQuestions}
        />

问题排查 #

• ref传递方式错误：home.tsx中直接给Questions组件传递ref属性，但Questions组件是通过props.refLic接收的。React的ref是特殊属性，不能直接作为普通props传递，必须使用forwardRef转发。
• 滚动目标错误：外层SectionList的data仅包含一个元素（嵌套FlatList的List.Section），SectionList本身没有可滚动的内容空间，scrollToLocation自然不会生效。实际问题列表在内部的FlatList中，应该针对它进行滚动控制。
• 滚动容器无滚动空间：如果SectionList/FlatList的容器未设置有效高度，或内容高度未超出容器，滚动操作不会触发。

修复方案 #

1. 修正ref传递（使用forwardRef） #

修改Questions.tsx，用forwardRef接收并转发ref到目标组件：

import { forwardRef, SectionList, DefaultSectionT } from 'react-native';

interface Props {
  questions: any; // 替换为实际类型
  itemsToShow: number;
}

const Questions = forwardRef<SectionList<any, DefaultSectionT>, Props>((props, ref) => {
  const { questions, itemsToShow } = props;

  const renderItem = ({ item }) => {
    // 你的renderItem逻辑
  };

  return (
    <SectionList
      key='questions'
      ref={ref}
      renderItem={({ item }) => item}
      sections={[
        {
          title: '',
          data: [
            <List.Section title='Questions' titleStyle={styles.title}>
              <FlatList
                data={questions.body.slice(0, itemsToShow)}
                renderItem={renderItem}
              />
            </List.Section>
          ]
        }
      ]}
    />
  );
});

export default Questions;

2. 调整滚动目标到内部FlatList（更合理方案） #

实际问题列表在FlatList中，直接给它绑定ref并控制滚动：

修改Questions.tsx：

import { forwardRef, FlatList } from 'react-native';

interface Props {
  questions: any;
  itemsToShow: number;
}

// ref指向内部FlatList
const Questions = forwardRef<FlatList<any>, Props>((props, ref) => {
  const { questions, itemsToShow } = props;

  const renderItem = ({ item }) => {
    // 你的renderItem逻辑
  };

  return (
    <List.Section title='Questions' titleStyle={styles.title}>
      <FlatList
        ref={ref}
        data={questions.body.slice(0, itemsToShow)}
        renderItem={renderItem}
      />
    </List.Section>
  );
});

export default Questions;

修改home.tsx：

import { useRef, FlatList } from 'react-native';

const scrollRef = useRef<FlatList>(null);

<Questions
  questions={question}
  itemsToShow={/* 你的itemsToShow值 */}
  ref={scrollRef}
/>

<ButtonCard
  goToQuestions={() => {
    // 滚动到FlatList第0项
    scrollRef.current?.scrollToIndex({ index: 0, animated: true });
    // 或用偏移量滚动：scrollRef.current?.scrollToOffset({ offset: 0, animated: true });
  }}
/>

3. 确保滚动容器有可滚动空间 #

给SectionList/FlatList的父容器设置有效高度（如flex:1、固定高度），确保内容高度超出容器，滚动操作才能生效。

内容的提问来源于stack exchange，提问作者ALAIN TORRES