React native - ScrollView 通过contentOffset不能找到初始位置的问题

问题

使用ScrollView的时候，react native有一个contentOffset变量，可以在渲染时设置初始变量，很多时候如果渲染成功在设置初始位置，会出现瞬间跳动等问题。

然后iOS是没有问题的，部分安卓机例如三星也是没问题，但是类似华为这样的安卓机就会出现失效的问题，原因是出在Android某些系统没有设置初始的scroll position导致的。

contentOffset设置方式如下:

<ScrollView style={{
    flexDirection: 'row' ,
    }}
    ref={(ref) => { this.scrollViewRef = ref }}
    pagingEnabled = {true}
    bounces={false}
    showsHorizontalScrollIndicator = {false}
    showsVerticalScrollIndicator = {false}
    horizontal = {true}
    pagingEnabled={true}
    alwaysBounceHorizontal = {true}
    scrollEnabled = {false}
    contentOffset = { this.state.filterNumber === 1 ? {x:ScreenUtil.screenW, y:0} : {x:0, y:0}}
>

解决方式

For anyone who can make this, these are the attributes in Android's native ScrollView.

android:scrollX The initial horizontal scroll offset, in pixels.
android:scrollY The initial vertical scroll offset, in pixels.

如果了解安卓的话，在安卓端进行重设初始变量。

不了解安卓的话，可以用另一种方式解决，就是用React native方法：

有人肯定用这种方式解决：

componentDidMount() {
    setTimeout(() => {
        this.scrollView.scrollTo({x: 100});
    }, 0);
}

但是这种是渲染后才滑动的，理论上可以解决，但是很有可能还是会出现跳动的情况。

所以最佳解决方式如下：

<ScrollView
    ref={scrollView => this.scrollView = scrollView}
    onContentSizeChange={() => {
        this._onContentSizeChange();
    }}
></ScrollView>

_onContentSizeChange() {
    let initialYScroll = 200;
    this.scrollView.scrollTo({x: 0, y: 100, animated: false});
};

_onContentSizeChange API解释如下:

Called when scrollable content view of the ScrollView changes.

Handler function is passed the content width and content height as parameters: (contentWidth, contentHeight)

It's implemented using onLayout handler attached to the content container which this ScrollView renders.

第一次渲染的时候一定会调用这个方法，所以在这个方法内去修改scrollView的初始位置即可，这样就不会见到scrollView闪烁跳动到指定位置的情况。

最后编辑于：2020.11.26 18:40:40