react-native-gesture-handle 功能组件无法访问的可滑动方法答案

【问题标题】：react-native-gesture-handle swipeable methods not accessible with functional componentsreact-native-gesture-handle 功能组件无法访问的可滑动方法
【发布时间】：2021-03-11 10:52:02
【问题描述】：

React-Native-Gesture-Handler docs 显示在 JS 类中实现的 Swipeable 方法，并且只能通过“this”关键字访问，例如this.close

来自文档的示例：

...
<RectButton style={styles.leftAction} onPress={this.close}>
...

如何在 React 函数式组件中使用“this”关键字（或其替代关键字）来访问这些方法？

【问题讨论】：

我认为你需要像 ref 这样的东西。

标签： react-native this react-functional-component react-native-gesture-handler

【解决方案1】：

在这种情况下使用 Ref：

const YourComponent = () => {

    const swipeRef = React.useRef()

    const closeSwipable = () => {
        swipeRef?.current?.close()
    }

    return (
        <Swipeable ref={swipeRef}>
        </Swipeable>
    )
}

【讨论】：