React Native Paper中Appbar三点菜单显示在左侧而非右侧的问题

I see the issue here—your Menu is using the entire Appbar.Header as its anchor instead of the specific three-dot Appbar.Action button. That's why it's aligning to the left side of the header instead of the right, where your menu trigger lives.

Here's how to fix this:

Step 1: Attach the Menu directly to the trigger button #

Move the Menu component inside the Appbar.Header and set its anchor to the three-dot action button. This ensures the menu positions itself relative to the exact element that triggers it.

Updated Code #

import React, { useEffect, useState } from 'react'
import { SafeAreaView, StyleSheet, Platform } from 'react-native'
import { connect } from 'react-redux'
...
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Appbar, Menu } from 'react-native-paper'
import MComponent from './subpages/component'
const Tab = createMaterialTopTabNavigator();
const TAG = 'TAG'

const MPage = ({ navigation, handleLoadData, isLoading }) => {
  useEffect(() => {
    handleLoadData()
  }, [])
  const [openMenu, setOpenMenu] = useState(false)

  return (
    <SafeAreaView style={styles.container}>
      <Appbar.Header statusBarHeight={0}>
        <Appbar.BackAction onPress={() => navigation.goBack()} />
        <Appbar.Content title="App Screen" />
        {/* Menu now anchors directly to the three-dot action button */}
        <Menu
          visible={openMenu}
          onDismiss={() => setOpenMenu(false)}
          anchor={
            <Appbar.Action 
              icon="dots-vertical" 
              onPress={() => setOpenMenu(true)} 
            />
          }
        >
          <Menu.Item 
            onPress={() => {
              setOpenMenu(false)
              handleLoadServiceOrders()
            }} 
            title="Option 1" 
          />
          <Menu.Item onPress={() => {}} title="Option 2" />
        </Menu>
      </Appbar.Header>

      <Loading loading={isLoading} />
      <Tab.Navigator>
        <Tab.Screen name={OPTIONS.PAGE_A} component={MComponent} />
        <Tab.Screen name={OPTIONS.PAGE_B} component={MComponent} />
      </Tab.Navigator>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'android' ? 30 : 0,
    justifyContent: 'center',
    flex: 1
  }
})

Why this works #

By targeting the Appbar.Action as the anchor instead of the whole header, react-native-paper's Menu component calculates its position relative to that specific button. This guarantees it appears on the right side (or directly adjacent to the trigger, depending on platform and screen space) as you expect.

If you still notice minor alignment tweaks are needed, you can adjust the Menu's style with something like style={{ marginRight: 8 }} to fine-tune its position.

内容的提问来源于stack exchange，提问作者Marcos Paulo Júnior