React Native 函数组件父组件调用子组件方法

React Native 函数组件父组件调用子组件方法

React Native 写法与 React 写法一致，调用react的 forwardRef 函数与 useImperativeHandle 函数实现

forwardRef

forwardRef是一个React函数，它允许你将ref从一个组件传递到其子组件。这在某些场景中非常有用，比如当你需要直接访问DOM元素或子组件的实例时。

使用场景

• 直接操作DOM：有时你可能需要直接访问DOM元素来执行某些操作，比如获取其尺寸、位置或焦点。
• 访问子组件的实例：当你需要调用子组件中的某个方法时，可以通过ref来实现。

useImperativeHandle

useImperativeHandle是一个自定义Hook，它允许你自定义暴露给父组件的实例值。默认情况下，父组件通过ref可以访问到子组件的DOM节点或组件实例。但使用useImperativeHandle，你可以自定义这个暴露的值。

使用场景

• 限制对子组件的访问：有时你可能不想暴露子组件的所有方法和属性给父组件，通过useImperativeHandle可以只暴露你希望暴露的部分。
• 封装组件：当你封装一个组件并希望提供一个更简洁或更安全的API给外部使用时，useImperativeHandle非常有用。

子组件

使用 forwardRef 函数创建子组件，props 接受父组件传过来的值与函数， ref 接收父组件的 ref
使用 useImperativeHandle 函数暴露方法给父组件调用

import React, { useImperativeHandle, forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const someMethod = () => {
    console.log('Child method called from parent');
  };

  useImperativeHandle(ref, () => ({
  // 暴露一个子组件方法给父组件  
    someMethod,
  }));

  return <div>Child Component</div>;
});

export default ChildComponent;

父组件

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

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

  const callChildMethod = () => {
    if (childRef.current) {
      childRef.current.someMethod();	// 调用子组件的方法（务必确认子组件是否暴露了该方法）
    }
  };

  return (
    <View>
      <ChildComponent ref={childRef} />
      <Button title="Call Child Method" onPress={callChildMethod} />
    </View>
  );
};

export default ParentComponent;