如何向上滚动以查看带有按钮的部分?反应原生和打字稿



我想要一个按钮能够滚动到我有一些问题的部分,现在我有这个代码如果我点击这个按钮它什么都不做,它不滚动,我做错了什么?

我有3个我正在使用的文件:

回家。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

作为发送组件prop "refLic">

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

as send component prop "goToQuestions">

interface Props {
goToQuestions: () => void
}
...
...
<TouchableOpacity
onPress={goToQuestions}
/>
<Questions
questions={question}
ref={scrollRef}
/>

但是在你的Questions组件中:

interface Props {
refLic?: React.RefObject<SectionList<any, DefaultSectionT>>
}
<SectionList
key='questions'
ref={refLic}
renderItem={({ item }) => item}
/>

您将参考ref传递给Questions,但期望refLic?然后将refLic作为ref传递给SectionList?这是打错了吗?

另外,SectionList是否正确处理ref道具?您没有为该组件粘贴任何代码。

另外,我一直使用/seen

ref.current.scrollIntoView();

我没有看到scrollToLocation,但这可能是完全正确的-不确定。

最新更新