如何为Reanimated获取react-native-paper中Button的ref？

你的代码出现警告是因为react-native-paper的Button是函数组件，默认不接收ref，直接传递ref会触发报错。要让它能被Reanimated处理，需要利用Button提供的innerRef属性将ref转发到底层可触摸元素，具体修改如下：

import { Button } from 'react-native-paper';
import Animated from 'react-native-reanimated';
import React from 'react';

// 正确转发ref到Button的底层组件
const MyAnimatedButton = Animated.createAnimatedComponent(
  React.forwardRef((props, ref) => {
    return <Button {...props} innerRef={ref} />;
  })
);

说明： #

• react-native-paper的Button组件内置了innerRef属性，专门用来传递ref到底层的触摸交互组件（如TouchableRipple）。
• 通过React.forwardRef将外部ref传递给Button的innerRef，就能让Reanimated获取到原生视图的引用，成功创建动画组件，同时消除警告。

内容的提问来源于stack exchange，提问作者Hikko