React Native Navigation v5 如何在外部screenOptions中调用页面组件内的子函数

推荐方案：组件内动态配置导航栏 #

React Native Navigation v5 支持组件内部通过 navigation.setOptions 动态修改导航配置，可直接绑定组件内定义的函数，无需跨作用域访问。

import { useLayoutEffect } from 'react';
import { Platform } from 'react-native';

const MainComponent = (props) => {
  const { navigation } = props;

  const subfunction = async (data) => {
    dispatch(action.delete(data));
  };

  // useLayoutEffect保证页面渲染前完成导航栏配置，避免UI闪烁
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Item
          title="Delete"
          iconName={Platform.OS === "android" ? "md-create" : "ios-trash-outline"}
          onPress={() => subfunction()} // 可传入自定义参数
        />
      )
    });
  }, [navigation, subfunction]);

  return {/* 页面UI内容 */}
}

该方案逻辑内聚，无额外参数传递成本，维护成本更低。

兼容方案：路由参数传递函数（适合必须外置screenOptions的场景） #

如果业务需要保留外置的screenOptions配置，可以通过路由参数传递组件内的函数，实现跨作用域调用：

1. 组件内部用useCallback包裹目标函数，避免频繁更新参数导致的重渲染，再将函数传递到路由参数

import { useCallback, useEffect } from 'react';

const MainComponent = (props) => {
  const { navigation } = props;

  const subfunction = useCallback(async (data) => {
    dispatch(action.delete(data));
  }, [dispatch]);

  useEffect(() => {
    // 将函数挂载到路由参数
    navigation.setParams({ subfunction })
  }, [navigation, subfunction]);

  return {/* 页面UI内容 */}
}

2. 外部screenOptions中从路由参数取值调用即可

export const screenOptions = (navData) => {
  const subfunction = navData.route.params?.subfunction;

  return {
    headerRight: () => (
      <Item
        title="Delete"
        iconName={Platform.OS === "android" ? "md-create" : "ios-trash-outline"}
        onPress={() => subfunction?.()} // 可选链避免初始化阶段函数未挂载时报错
      />
    )
  }
}

注意事项 #

• 调用传递的函数时必须加可选链判断，避免组件未完成挂载时触发空指针报错
• 传递的函数必须用useCallback包裹依赖项，否则会频繁触发路由参数更新，导致导航栏不必要的重渲染

内容的提问来源于stack exchange，提问作者Ganesh Haran Mogan