React Native点击头部导航搜索图标跳转详情页问题求助

当前Header搜索按钮无法跳转的原因是：静态配置的options对象中，headerRight组件无法获取navigation导航实例，不能触发跳转方法。
React Navigation的Stack.Screen支持将options设为函数形式，入参会自动注入navigation对象，给搜索图标绑定点击事件调用跳转方法，即可实现和页内按钮完全一致的跳转效果。

完整可运行代码 #

仅需修改App.js，MainScreen.js、DetailScreen.js保持原有代码即可正常运行。

App.js #

import * as React from 'react';
import { View, Text, Button, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar } from "expo-status-bar";
import { TouchableOpacity } from 'react-native-gesture-handler';

let search = require('./search.png');

import MainScreen from './MainScreen';
import DetailScreen from './DetailScreen';


const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <StatusBar style="auto" />
      <Stack.Navigator initialRouteName="MAIN">
        <Stack.Screen 
          name="MAIN" 
          component={MainScreen}
          options={({navigation}) => ({
            title: '',
            headerLeft:() => (
              <View>
                <Text style={{fontSize:18,marginLeft:30,marginTop:-5,fontWeight:'600'}}>성북구</Text>
              </View>
            ),
            headerRight:() => (
              <TouchableOpacity onPress={() => navigation.navigate('DETAIL')}>
                  <Image source={search} style={{height: 20, width: 20,marginRight:20,}}/>
              </TouchableOpacity>
            )
          })}
        />
        <Stack.Screen 
          name="DETAIL" 
          component={DetailScreen} 
          options={{
            title: '상세화면'
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

MainScreen.js（无修改） #

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

export default class MainScreen extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize:30}}>Main Screen</Text>
        <Button onPress={() => this.goMainScreen()} title='Go Detail Screen'/>
      </View>
    );
  }

  goMainScreen(){
    this.props.navigation.navigate('DETAIL');
  }
}

DetailScreen.js（无修改） #

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

export default class DetailScreen extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize:30}}>Detail Screen</Text>
      </View>
    );
  }
}

内容的提问来源于stack exchange，提问作者정혜주