反应本机。滚动到ScrollView中的元素的最佳方法

时间:2018-11-16 16:18:00

标签: react-native

我有一些组件的滚动视图。

<ScrollView ref={ref => this.contentRef = ref}>
    <SomeComponent ref={ref => this.targetRef = ref}
</ScrollView>

滚动到SomeComponent但限制到ScrollView高度的最佳方法是什么?

我的尝试:

if (this.contentRef && this.targetRef) {
    const UIManager = NativeModules.UIManager;
    UIManager.measure(findNodeHandle(this.contentRef), (contentX, contentY, contentW, contentH) => {
    UIManager.measure(findNodeHandle(this.targetRef), (activeStepX, activeStepY) => {
        const h = Dimensions.get('window').height;
        if (activeStepY > contentH / 2) {
        this.contentRef.scrollTo({ x: 0, y: h, animated });
        } else {
            this.contentRef.scrollTo({ x: 0, y: contentH, animated });
        };
    });
    });
};

但是如果目标非常靠近屏幕底部,则我的底部有空白区域(抱歉,我需要隐藏任何信息)。

enter image description here

但是应该看起来像

enter image description here

1 个答案:

答案 0 :(得分:1)

有点像使用onLayout方法

https://facebook.github.io/react-native/docs/view#onlayout

例如

<ScrollView> 
    <YourComponent onLayout={this.onLayout()} />
</ScrollView>


    onLayout(e) {
      return e.nativeEvent.layout.h // e.g would be the height of your scroll view
    }