react native ScrollView实现滑动锚定,滑动到指定位置

实现ScrollView滑动视图组件滑动到指定位置,实现tab与具体位置相锚定
给需要锚定的组件加上onLayout属性
//event.nativeEvent.layout.x是水平方向值,event.nativeEvent.layout.y是数值方向值
//this.layoutList用于存储组件位置

onLayout={(event) => {
                    this.layoutList.push(event.nativeEvent.layout.y);
                }}

给ScrollView加上ref属性
//myScrollView需在class中声明

ref={(view) => {
                    this.myScrollView = view;
                }}

onPress属性出添加函数实现点击后滑动到锚点处
//clickToScroll函数处理用户点击某tab后ScrollView自动滑动到某个锚定位置

public clickToScroll = (index: number) => {
        this.myScrollView.scrollTo({ x: 0, y: this.layoutList[index], animated: true });
    };

你可能感兴趣的:(前端,react,native,react.js,javascript)