React Native 如何在其他组件中调用函数式组件内部的自定义函数

React官方提供了React.forwardRef + useImperativeHandle的组合方案，用于向外部暴露函数组件的内部方法，具体实现步骤如下：

步骤1：改造DrawerSetting组件 #

注：你的文件后缀标注为.dart，但实际是React Native的JS/TS代码，属于命名笔误，不影响逻辑实现。我们需要给组件包裹forwardRef，并用useImperativeHandle暴露add方法：

import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import {
  createDrawerNavigator, DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Resources from '../DrawerScreens/Resources';
import Themes from '../DrawerScreens/Themes';
import AboutUs from '../DrawerScreens/AboutUs';
import CustomSidebarMenu from './CustomSidebarMenu';
import Login from '../Validation/Login';
import AsyncStorage from '@react-native-async-storage/async-storage';


const Drawer = createDrawerNavigator();

// 用forwardRef包裹组件，接收外部传递的ref
const DrawerSetting = React.forwardRef(({route, navigation }, ref) => {

  console.log("email is = " + password);

  const add = () =>{
    console.log("Addition called");
  }

  // 将内部方法暴露给外部ref
  React.useImperativeHandle(ref, () => ({
    add: add
    // 可在此处添加更多需要对外暴露的方法
  }))

  AsyncStorage.getItem("userId").then((val) => {
    console.log("Drawer valuse are=" + val);
  });
    

  return (
    <NavigationContainer independent={true} >
      <Drawer.Navigator initialRouteName="Resources" drawerContent={(props) => <CustomSidebarMenu {...props} />}

      >
        <Drawer.Screen name="Resources" component={Resources}
          options={{ drawerLabelStyle: { fontSize: 16, color: 'black', fontWeight: 'bold', } }}
        />
        <Drawer.Screen name="Themes" component={Themes}
          options={{ drawerLabelStyle: { fontSize: 16, color: 'black', fontWeight: 'bold', } }}
        />
        <Drawer.Screen name="About Us" component={AboutUs}
          options={{ drawerLabelStyle: { fontSize: 16, color: 'black', fontWeight: 'bold', } }}
        />


      </Drawer.Navigator>
    </NavigationContainer>
  );
})

export default DrawerSetting;

步骤2：在其他组件中调用add方法 #

分两种常见场景实现：

场景1：父组件调用DrawerSetting的add方法 #

• 函数式父组件实现：

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

export default function ParentComponent() {
  // 创建ref绑定DrawerSetting组件
  const drawerRef = useRef(null)

  const triggerAdd = () => {
    // 确认组件挂载完成后再调用方法，避免空报错
    if(drawerRef.current) {
      drawerRef.current.add()
    }
  }

  return (
    <View>
      <Button title="调用add方法" onPress={triggerAdd} />
      <DrawerSetting ref={drawerRef} />
    </View>
  )
}

• 类组件父组件实现：

import React, { Component } from 'react'
import { Button, View } from 'react-native'
import DrawerSetting from './DrawerSetting'

export default class ParentComponent extends Component {
  constructor(props) {
    super(props)
    this.drawerRef = React.createRef()
  }

  triggerAdd = () => {
    if(this.drawerRef.current) {
      this.drawerRef.current.add()
    }
  }

  render() {
    return (
      <View>
        <Button title="调用add方法" onPress={this.triggerAdd} />
        <DrawerSetting ref={this.drawerRef} />
      </View>
    )
  }
}

场景2：兄弟组件/无层级关系组件调用add方法 #

如果两个组件没有直接父子关系，可以选择以下两种方案：

• 将ref提升到两个组件的共同父级，通过props传递触发add方法的回调函数
• 引入全局状态管理工具（如Zustand、Redux、Context），通过状态变更触发对应逻辑，适合逻辑复杂度高的场景

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