react-native - React Native React 导航标题按钮事件

Question

您好我正在尝试在我的导航器右按钮中绑定(bind)一个功能，

但它给出了错误。

这是我的代码:

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import Modal from 'react-native-modalbox';
import { StackNavigator } from 'react-navigation';
import {
   Text,
   View,
   Alert,
   StyleSheet,
   TextInput,
   Button,
   TouchableHighlight
} from 'react-native';

import NewsTab from './tabs/news-tab';
import CustomTabBar from './tabs/custom-tab-bar';

export default class MainPage extends Component {
    constructor(props) {
        super(props);  
    }

    alertMe(){
        Alert.alert("sss");
    }

    static navigationOptions = {
        title: 'Anasayfa',
        headerRight: 
            (<TouchableHighlight onPress={this.alertMe.bind(this)} >
                <Text>asd</Text>
             </TouchableHighlight>)        
    };

    render() {
        return(
            <View>

            </View>
        );
    }
}

并得到这样的错误:

undefined 不是对象(评估“this.alertMe.bind”)

当我在渲染函数中使用此方法时，它运行良好，但在 NavigatonOption 中我无法处理它。我能做些什么来解决这个问题。

Answer 1

react-navigation v5 版本将是:

export const ClassDetail = ({ navigation }) => {
  const handleOnTouchMoreButton = () => {
    // ...
  };

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity onPress={handleOnTouchMoreButton}>
          <Icon name="more" />
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  return (
    // ...
  )
}