React Native Paper Menu组件在Header中点击无响应的解决方法

核心错误点及修复步骤 #

• 菜单显示逻辑颠倒：你写的openMenu函数里是setVisible(false)，点击按钮时反而把菜单设为隐藏状态，这是最直接的失效原因。把openMenu改成setVisible(true)即可纠正。
• Provider位置错误：React Native Paper的Provider需要包裹整个应用（至少是包含Menu的导航组件），不能放在headerRight的局部视图里，否则Menu无法正确获取上下文，导致功能异常。
• 导航参数引用错误：headerRight里的Feather组件用了props.navigation，但在options的回调中，导航对象是通过参数传入的，应该改为navigation.navigate('Create')。
• 冗余负边距可能遮挡点击区域：left: -60这类负定位会导致按钮实际点击区域偏移，建议改用margin或padding控制间距，避免依赖负边距。

修复后的完整代码示例 #

import React from 'react';
import { View, Text, Pressable } from 'react-native';
import { Drawer } from '@react-navigation/drawer';
import { Provider as PaperProvider, Menu, Divider } from 'react-native-paper';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Feather from 'react-native-vector-icons/Feather';

// 假设BottomTab是你的底部导航组件
const BottomTab = () => <View />;

export default function App() {
  const [visible, setVisible] = React.useState(false);

  // 修正打开菜单的逻辑
  const openMenu = () => setVisible(true);
  const closeMenu = () => setVisible(false);

  return (
    // 将PaperProvider放在最外层，包裹整个导航组件
    <PaperProvider>
      <Drawer.Navigator 
        initialRouteName="Home"
        screenOptions={({ navigation }) => ({
          headerStyle: { backgroundColor: 'white' },
          headerTitleStyle: { color: 'black' },
          headerLeft: () => (
            <FontAwesome5 
              name='user-circle' 
              style={{ marginLeft: 15 }} 
              onPress={navigation.toggleDrawer} 
              size={28} 
              solid 
            />
          ),
        })}
      >
        <Drawer.Screen 
          name="Home" 
          component={BottomTab} 
          options={({ navigation }) => ({         
            title: '',
            headerTitleAlign: 'center',
            headerRight: () => (
              <View style={{ flexDirection: 'row', alignItems: 'center', marginRight: 15 }}>
                <Menu
                  visible={visible}
                  onDismiss={closeMenu}
                  anchor={
                    <Pressable onPress={openMenu} style={{ paddingRight: 15 }}>
                      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
                        Popular
                      </Text>
                    </Pressable>
                  }
                >
                  <Menu.Item onPress={() => {}} title="Item 1" />
                  <Menu.Item onPress={() => {}} title="Item 2" />
                  <Divider />
                  <Menu.Item onPress={() => {}} title="Item 3" />
                </Menu>

                <MaterialIcons
                  onPress={() => console.log('Pressed expand')}
                  name="expand-more"
                  size={30}
                  style={{ marginHorizontal: 10 }}
                /> 

                <Feather
                  onPress={() => navigation.navigate('Create')}
                  name="plus-circle"
                  color="black"              
                  size={30}
                />
              </View>
            ),
          })}
        />
      </Drawer.Navigator>
    </PaperProvider>
  );
}

额外说明 #

• 确保已正确安装并链接React Native Paper和react-native-vector-icons图标库
• 尽量避免在header中使用负边距定位，改用margin或padding调整元素间距，防止点击区域异常
• Menu的锚点组件建议用Pressable或Touchable系列组件，确保点击事件能正确触发

内容的提问来源于stack exchange，提问作者Samuel