react native 视图滚动到指定位置

代码结构:

1
2
3
4
5
<ScrollView horizontal={true} ref={(view) => { this.myScrollView = view; }}>

<View></View>
...
<ScrollView>

实现方法:

  1. 先给View增加一个onLayout属性

//重点：layoutX 是相对于父布局的，所以这个组件 要放到scroolView 下面的第一级

1
<View onLayout={event=>{this.layoutX = event.nativeEvent.layout.x}}>
  1. 然后通过下面这样就可以实现滚动到指定位置：
1
this.myScrollView.scrollTo({ x: this.layoutX, y: 0, animated: true});