如何将章节列表的滚动到位置传递给子组件？

Question

我正在构建一个反应本机应用程序，该应用程序具有用户需要填写的过程指南。当用户选择一个选项后，我想将其滚动到屏幕上的新选项出现的位置。

为了实现我需要在按钮的OnClick中可用的SultectList的scrollTolocation函数。

 42 const sectionData = [
 43   {
 44     data: [
 45       {
 46         key: "1",
 47         program:  [
 48           <Question
 49             key={1}
 50             onAnswerSubmit={() => {
 51               scrollToLocation(1);
       /* 
           How do I access scrollToLocation from 
           SectionList and pass it along as a prop here?
        */
 52             }}
 53           />,
 54           <Question
 55             key={2}
 56             onAnswerSubmit={() => {
 57               scrollToLocation(1);
 58             }}

130   public render() {
131
132     return (
133       <SectionList
135         sections={ sectionData }
136         renderItem={ renderItem }
137         renderSectionHeader={ sectionHeader }
138         keyExtractor={ keyExtractor }
139       >
140       </SectionList>

Question.tsx

 28   public render() {
 29     return (
 30       <Question
 31         {...this.props}
 32         onPress={this.props.onAnswerSubmit}
 33       />
 34     );

Answer 1

您可以将ref添加到placterlist

ref = "foo"

称其为

this.refs.foo.scrollToLocation(params);

或

ref = {ref => this.sectionListRef = ref}

称其为

this.sectionListRef.scrollToLocation(params);