React Native：如何从原生Header调用页面组件内的函数？

没法直接通过navigation或route参数访问组件内部的函数——因为logNumbers是MyScreen组件的局部函数，导航配置的代码不在组件的作用域内，自然拿不到。

下面是两种可行的解决办法：

方法一：通过route.params传递函数 #

在MyScreen组件内部，用useEffect把函数挂载到route.params上，之后在导航配置里通过route.params调用：

修改MyScreen组件：

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const MyScreen = ({ route, navigation }) => {
  const logNumbers= (num1, num2) => {
    console.log(num1);
    console.log(num2);
  };

  useEffect(() => {
    // 将函数挂载到route.params
    route.params = { ...route.params, logNumbers };
  }, [logNumbers]);

  return (
    <View>
      <Text>My Screen View</Text>
    </View>
  );
};

export default MyScreen;

然后修改导航配置的headerRight：

<HomeStack.Navigator>
  ...
  <HomeStack.Screen 
    name="MyScreen" 
    component={MyScreen}
    options={({ navigation, route }) => ({
      title: "My Screen Header",
      headerRight: () => (
        <TouchableOpacity onPress={() => route.params?.logNumbers(10, 20)}>
          <Text>Log</Text>
        </TouchableOpacity>
      )
    })} 
  />
</HomeStack.Navigator>

注意用?.可选链操作符，避免组件未挂载时route.params不存在导致报错。

方法二：在组件内部动态设置Header #

直接在MyScreen组件里用navigation.setOptions定义headerRight，这样按钮的onPress可以直接访问组件内部的函数：

修改MyScreen组件：

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const MyScreen = ({ navigation }) => {
  const logNumbers= (num1, num2) => {
    console.log(num1);
    console.log(num2);
  };

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity onPress={() => logNumbers(10, 20)}>
          <Text>Log</Text>
        </TouchableOpacity>
      )
    });
  }, [navigation, logNumbers]);

  return (
    <View>
      <Text>My Screen View</Text>
    </View>
  );
};

export default MyScreen;

导航配置可以简化，不用再定义headerRight：

<HomeStack.Navigator>
  ...
  <HomeStack.Screen 
    name="MyScreen" 
    component={MyScreen}
    options={{ title: "My Screen Header" }} 
  />
</HomeStack.Navigator>

这种方式更直观，因为Header的逻辑和组件本身耦合在一起，也不需要跨作用域传递函数。

内容的提问来源于stack exchange，提问作者Homit Dalia