React Navigation：如何在headerRight onPress中调用其他文件的函数

当然可以实现！在React Navigation里，要在headerRight的onPress中调用组件内的自定义方法，核心是让导航配置能拿到组件实例的方法，这里给你几种适配不同场景的方案：

方案一：将navigationOptions定义为组件内部的实例方法（类组件场景） #

如果你的MyPet是类组件，别把navigationOptions写成静态属性，改成组件内的函数，这样就能直接访问组件的_alert方法了：

// MyPet.js
import React, { Component } from 'react';
import { View, Alert, Button } from 'react-native';

class MyPet extends Component {
  // 用箭头函数定义，避免this指向问题
  _alert = () => {
    Alert.alert('Saving');
  };

  // 把navigationOptions定义为组件的实例方法
  navigationOptions = ({ navigation }) => ({
    tabBarLabel: 'My Patient',
    tabBarIcon: () => <YourIconComponent />, // 替换成你的图标组件
    headerRight: () => (
      <Button
        title="Save"
        onPress={this._alert} // 直接调用组件内的方法
      />
    )
  });

  render() {
    return <View>{/* 页面内容 */}</View>;
  }
}

export default MyPet;

方案二：通过setParams传递方法（适配导航配置在单独router.js的场景） #

如果你的导航配置是在单独的router.js里，没法直接访问MyPet组件的方法，那可以在组件挂载时把_alert方法通过navigation.setParams传递给导航参数，再在router.js里获取调用：

首先在MyPet.js中传递方法：

// MyPet.js
componentDidMount() {
  // 把_alert方法存入导航参数
  this.props.navigation.setParams({ showAlert: this._alert });
}

_alert = () => {
  Alert.alert('Saving');
};

然后在router.js的导航配置中调用：

// router.js
import { createStackNavigator } from 'react-navigation-stack';
import MyPet from './MyPet';

const MyPatientStack = createStackNavigator({
  MyPatient: {
    screen: MyPet,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'My Patient',
      tabBarIcon: () => <YourIconComponent />, // 替换成你的图标组件
      headerRight: () => (
        <Button
          title="Save"
          onPress={() => {
            // 通过getParams获取传递过来的方法，加判断避免报错
            const showAlert = navigation.getParams('showAlert');
            if (showAlert) showAlert();
          }}
        />
      )
    })
  }
});

方案三：函数组件+useLayoutEffect（React Navigation v5+推荐写法） #

如果你的MyPet是函数组件，用React Navigation的useNavigation和useLayoutEffect钩子来设置headerRight，写法更直观：

// MyPet.js
import React, { useLayoutEffect } from 'react';
import { View, Alert, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const MyPet = () => {
  const navigation = useNavigation();
  
  const _alert = () => {
    Alert.alert('Saving');
  };

  // 组件挂载后设置导航选项
  useLayoutEffect(() => {
    navigation.setOptions({
      tabBarLabel: 'My Patient',
      tabBarIcon: () => <YourIconComponent />, // 替换成你的图标组件
      headerRight: () => (
        <Button
          title="Save"
          onPress={_alert}
        />
      )
    });
  }, [navigation]);

  return <View>{/* 页面内容 */}</View>;
};

export default MyPet;

小提示 #

• 类组件中一定要用箭头函数定义_alert，或者在构造函数中绑定this，否则调用时this会指向错误；
• 如果用getParams获取方法，建议加个存在性判断，避免组件未挂载时调用报错；
• React Navigation v5+和旧版本API差异较大，如果你用的是v5及以上，优先考虑方案三的写法。

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