如何在 React Navigation 5 header 中使用按钮触发 class 功能？

Question

我在下面有这个 class 组件。我需要通过导航 header 在我的 class 中触发一个功能。单击 'TEST' 时没有任何反应。如果我用 console.log("TEST") or something 替换 this.triggerFunction 那么它就可以了。

https://reactnavigation.org/docs/header-buttons 这里的文档给出了功能组件的示例，但我找不到任何关于 class 的信息。

class Home extends React.Component {
   ...


  async componentDidMount() {
    ...
    
    this.props.navigation.setOptions({
      headerRight: () => (
        <View>
          <TouchableOpacity onPress={() => this.triggerFunction}>
            <Text>TEST<Text>
          </TouchableOpacity>
        </View>
      ),
    });
  }

   
    triggerFunction = () => {
      console.log('inside header function');
    };
  }

Answer 1

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

class Home extends React.Component {
    async componentDidMount() {
        this.props.navigation.setOptions({
            headerRight: () => {
                return (<View>
                            <TouchableOpacity onPress={this.triggerFunction}>
                                <Text>TEST<Text>
                            </TouchableOpacity>
                        </View>
                        );
              }
        });
      }

  triggerFunction = () => {
    console.log('inside header function');
  };
}

请试一试。如果它不起作用，请回复我。

Answer 2

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

class Home extends React.Component {
    async componentDidMount() {
        this.props.navigation.setOptions({
            headerRight: () => {
                return (<View>
                            <TouchableOpacity onPress={this.triggerFunction}>
                                <Text>TEST<Text>
                            </TouchableOpacity>
                        </View>
                        );
              }
        });
      }

  triggerFunction = () => {
    console.log('inside header function');
  };
}