如何在Recompose中使用withHandlers向函数组件添加refs并在ScrollView上调用ScrollTo？

问题描述

我的具体目标是使用一个ScrollView但保持功能组件结构。

My specific goal is to use the ScrollTo method of a ScrollView but maintain functional component structure.

更一般地说，这需要获取当前组件。

More generally this requires getting ref to the current component which isn't possible with naked react native.

2016年12月重新构建添加了但我无法弄清楚如何正确使用它。

In Dec 2016 recompose added Allows handlers property of withHandlers to be a factory function but I can't quite figure out how to use it correctly.

如何在重构和使用withHandlers时将refs添加到功能组件中在ScrollView上调用ScrollTo？

How do you add refs to functional components using withHandlers in Recompose and call ScrollTo on a ScrollView?

推荐答案

你可以尝试这样的事情：

You can try something like this:

/* ... */

const MyView = ({ onRef, children }) => (
    <View>
        <ScrollView ref={onRef} /* ... */>
            {children}
        </ScrollView>
    </View>
)

export default compose(
    withHandlers(() => {
        let myScroll = null;

        return {
            onRef: () => (ref) => (myScroll = ref),
            scrollTo: () => (value) => myScroll.scrollTo(value)
        }
    },
    lifecycle({
        componentDidMount() {
            this.props.scrollTo({ x: 0, y: 100, animated: true })
        }
    })
)(MyView)

这篇关于如何在Recompose中使用withHandlers向函数组件添加refs并在ScrollView上调用ScrollTo？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！