如何在 React Native 中滚动到视图？

Question

我正在使用 React Native 开发应用程序。在那里，我想在按下按钮时滚动到 View。我试过这样的东西。

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

然后，尝试了

this.myView.focus()

但是，它不起作用。

我想获得如下 GIF 演示所示的结果。如何做到这一点？

Answer 1

您应该存储 ScrollView ref 并使用 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 });。

更新： 可以找到一个工作示例 in this repo.

如何在 React Native 中滚动到视图？

How to scroll into View in React Native?

javascript

focus

view

react-native