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

Posted 2023-03-16

【中文标题】react-native-gesture-handle 功能组件无法访问的可滑动方法

【英文标题】：react-native-gesture-handle swipeable methods not accessible with functional components

【发布时间】：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 这样的东西。

【参考方案1】：

在这种情况下使用 Ref：

const YourComponent = () => 

    const swipeRef = React.useRef()

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

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