如何使用堆栈导航器中的HeaderRight组件导航到其他屏幕？

import React from 'react';
import { View, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

// 创建堆栈导航器
const Stack = createStackNavigator();

// 屏幕组件
const HomeScreen = ({ navigation }) => {
  return (
    <View>
      {/* 在HeaderRight组件中添加一个按钮 */}
      <Button
        title="Go to Other Screen"
        onPress={() => navigation.navigate('OtherScreen')}
      />
    </View>
  );
};

const OtherScreen = () => {
  return (
    <View>
      {/* 其他屏幕的内容 */}
    </View>
  );
};

// 导航器配置
const AppNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          // 在导航选项中配置HeaderRight组件
          headerRight: () => (
            <View style={{ marginRight: 10 }}>
              {/* 在HeaderRight组件中添加一个按钮 */}
              <Button
                title="Go to Other Screen"
                onPress={() => navigation.navigate('OtherScreen')}
              />
            </View>
          ),
        }}
      />
      <Stack.Screen name="OtherScreen" component={OtherScreen} />
    </Stack.Navigator>
  );
};

export default AppNavigator;