在 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 方法,从而在外部触发了子组件的方法。