React-Native中的ScrollToIndex

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() {
    this.list.scrollToIndex({animated: true, index: tempIndex, viewOffset:0,viewPosition:0});
}

您还可以使用：

initialScrollIndex

Answer 2

在我的例子中，我必须这样做才能使properly to in正常工作，

1.添加对扁平列表的引用：

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

带超时的

1. 调用scrollToIndex()：

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

然后，

1. 在flatlist

内再次调用函数

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

}

}