如何在React Native中滚动到View?

时间:2019-09-14 08:10:40

标签: javascript react-native view focus

我正在使用React Native开发一个应用程序。在那里,我想在按下按钮时滚动到View。我已经尝试过类似的事情。

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

然后尝试

this.myView.focus()

但是,它不起作用。

我想要获得以下GIF演示中所示的结果。该怎么做?

enter image description here

1 个答案:

答案 0 :(得分:3)

您应该存储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 });

更新: 可以找到有效的示例in this repo