Question

在我的应用程序中，我想使用scrollToIndex（）这是FlatList组件的一个方法。

 render() {
    let { posts, featuredWorkouts, mainFeedIsLoading } = this.props;
    let mainFeed = <SwiperContainer featuredWorkouts={featuredWorkouts} />;

    let mainFeedData = (
      <View>
        <View style={{ marginBottom: 5 }}>
          <SwiperContainer featuredWorkouts={featuredWorkouts} />
        </View>

        <FlatList
          data={posts}
          scrollToIndex={5}
          extraData={[posts, mainFeedIsLoading]}
          renderItem={item => this.renderPost(item)}
          keyExtractor={item => item.shareId}
        />
      </View>
    );

    if (mainFeedIsLoading) {
      mainFeedData = (
        <View style={styles.screenLoader}>
          <ScreenLoader color="lightblue" size="large" />
        </View>
      );
    }

    return (
      <View>
        <ScrollView>{mainFeedData}</ScrollView>
      </View>
    );
  }

例如，当页面加载时，我想转到第10个索引。我怎样才能做到这一点？我尝试了scrollToIndex（），它没有用。

Answer 1

您必须将ref添加到您的平面列表中。

ref={(ref) => { this.list = ref; }}

此外，您还必须将滚动索引添加到componentdidmount。

componentDidMount() {
    this.list.scrollToIndex({animated: true, index: tempIndex, viewOffset:0,viewPosition:0});
}

您还可以使用：

initialScrollIndex

Answer 2

以我为例，我必须这样做才能使scrolltoindex正常工作，

1。添加对平面列表的引用：

`
ref={ref => {
this.flatListRef = ref;
}}
`

2。调用带有超时的scrollToIndex（）：

`
setTimeout(() => {
      this.flatListRef.scrollToIndex({
    animated: true,
    index: this.state.pressedIndex
      });
    }, 500);
`

3。然后在平面列表中再次调用函数

 onScrollToIndexFailed={() => 
 {
  this.scrollToIndex();

}

}

React-Native

2 个答案: