React/RN Hooks 封装组件 ref绑定及方法调用

在 React Native 中使用 react.forwardRef 和 useImperativeHandle 来在外部触发子组件的方法。这两个 React 的特性提供了一种有趣的方式，允许我们从父组件中直接触发子组件的特定操作。

创建子组件：

首先，创建一个子组件 CustomButton，它将演示如何将 ref 传递给内部的 TouchableOpacity 组件，并暴露一个方法，以便外部可以调用它。

import React, { forwardRef, useImperativeHandle } from 'react';
import { TouchableOpacity, Text } from 'react-native';

const CustomButton = forwardRef((props, ref) => {
  const customMethod = () => {
    console.log('CustomButton customMethod called');
    // 在这里执行你想要的操作
  };

  useImperativeHandle(ref, () => ({
    customMethod,
    // 支持多个方法 或 属性 暴露
    xxxxxx,
    xxxxxxx,
    xxxxxxxx,
  }));

  return (
    <TouchableOpacity {...props}>
      <Text>{props.title}</Text>
    </TouchableOpacity>
  );
});

export default CustomButton;

使用 useImperativeHandle 暴露方法：

在上面的代码中，我们使用了 useImperativeHandle 钩子来暴露 customMethod 方法。这使得我们可以在外部访问子组件内部的方法，从而实现外部触发子组件的目标。

创建父组件：

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import CustomButton from './CustomButton';

const ParentComponent = () => {
  const customButtonRef = useRef(null);

  const handleButtonClick = () => {
    if (customButtonRef.current) {
      customButtonRef.current.customMethod();
    }
  };

  return (
    <View>
      <CustomButton ref={customButtonRef} title="Click Me" />
      <Button title="Call Custom Method" onPress={handleButtonClick} />
    </View>
  );
};

export default ParentComponent;

在上面的代码中，创建了一个名为 customButtonRef 的引用，并将其传递给 CustomButton 组件。当点击按钮时，我们通过引用调用了 customMethod 方法，从而在外部触发了子组件的方法。