React Native中StackNavigator的headerRight自定义函数调用异常问题

看起来你遇到的核心问题是导航栏头部按钮没法正确触发组件里的logout方法，结合你的代码片段，我梳理了几个常见的错误点和对应的修复方案：

1. 最可能的原因：navigationOptions的配置方式错误 #

如果你的导航栏按钮是在static navigationOptions里定义的，那这里的this指向的是类本身，而不是组件的实例，自然找不到logout方法。

修复方法（针对react-navigation v4及更早版本）： #

• 第一步：在组件的componentDidMount生命周期里，把logout方法挂载到导航参数中：

componentDidMount() {
  this.props.navigation.setParams({ logout: this.logout });
}

• 第二步：把static navigationOptions改成函数形式，通过navigation.getParam获取方法：

static navigationOptions = ({ navigation }) => {
  return {
    headerRight: (
      <Button
        title="Logout"
        onPress={() => navigation.getParam('logout')()}
      />
    ),
    // 左侧按钮同理配置
    headerLeft: (
      <Button
        title="Back"
        onPress={() => navigation.goBack()}
      />
    )
  };
};

2. 检查导航属性的拼写 #

你的代码里写了this.props.navi...，这里大概率是拼写错误，应该是this.props.navigation——如果属性名错了，不仅没法设置参数，连导航相关的操作都会失效。

3. 确认箭头函数的绑定（再核对下） #

你用箭头函数定义logout = async () => {}是正确的写法，这样能保证this指向组件实例，不用额外手动绑定。如果是普通函数async logout() {}，才需要在构造函数里加this.logout = this.logout.bind(this)，不过你的写法没问题。

额外提示：AsyncStorage的兼容性 #

现在React Native官方已经把AsyncStorage移到了@react-native-async-storage/async-storage包，如果你用的是较新的RN版本，记得先安装这个包再导入：

import AsyncStorage from '@react-native-async-storage/async-storage';

完整示例代码片段 #

import React, { Component } from 'react';
import { Button, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationScreenProps } from 'react-navigation';

type Props = NavigationScreenProps;

export default class HomeScreen extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { refreshing: false };
  }

  componentDidMount() {
    // 将logout方法挂载到导航参数
    this.props.navigation.setParams({ logout: this.logout });
  }

  logout = async () => {
    Alert.alert("HI");
    await AsyncStorage.setItem('current_appid', '');
    // 这里可以添加登出后的导航操作，比如跳转到登录页
    // this.props.navigation.navigate('Login');
  };

  static navigationOptions = ({ navigation }) => {
    return {
      headerRight: (
        <Button
          title="Logout"
          onPress={() => navigation.getParam('logout')()}
          color="#fff"
        />
      ),
      // 左侧按钮示例
      headerLeft: (
        <Button
          title="Menu"
          onPress={() => Alert.alert('Menu clicked')}
          color="#fff"
        />
      )
    };
  };

  render() {
    return (
      // 你的页面内容
    );
  }
}

如果是react-navigation v5+版本，配置方式会略有不同，直接在组件内用navigation.setOptions即可：

componentDidMount() {
  this.props.navigation.setOptions({
    headerRight: () => (
      <Button
        title="Logout"
        onPress={this.logout}
        color="#fff"
      />
    )
  });
}

这样调整后，导航栏的按钮应该就能正常触发logout函数了。

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