如何在React Native中实现滚动到视图的效果？

Question

我正在使用React Native开发一个应用程序。在应用程序中，当我按下一个按钮时，我想要滚动到一个 View 中。我尝试了以下代码。

render() {
  return(
    <View ref={field => this.myView = field} >
      //something inside the view
    </View>
  )
}

然后，尝试。

this.myView.focus()

但是，它不起作用。

我想要获得如下GIF演示中显示的结果。如何做到呢？

- Sennen Randika

Answer 1

你应该存储ScrollView的引用并使用scrollViewRef.scrollTo()

render() {
  return(
    <ScrollView ref={ref => this.scrollViewRef = ref}>
      <View 
        // you can store layout for each of the fields
        onLayout={event => this.layout = event.nativeEvent.layout}
      > 
        // some field goes here
      </View>
    </ScrollView>
  )
}

当出现错误时，只需滚动到您的字段this.scrollViewRef.scrollTo({ y: this.layout.y, animated: true });。

更新：可以在此存储库中找到一个可用的示例。

- Nazar Litvin

---

我将提供一个可行的例子，很快会回复您。 - Nazar Litvin

看看这个GitHub仓库，里面有一个可用的示例。 https://github.com/nazarlitvin/rn-scroll-sample - Nazar Litvin

你可以使用 FlatList 和 scrollToIndex 来处理它，在我的演示中也实现了它。 - Nazar Litvin