React Native Paper - Menu 组件 visible 踩坑记录

17 Feb, 2026 #移动端开发

问题描述

最近在尝试使用 React Native Paper 的 Menu 组件，发现了一个比较坑的地方，我们先来看按照官方文档中的示例代码编写的效果：

可以看到，第一次点击按钮打开 Menu 是正常的，但是在关闭之后再次点击按钮时，Menu 会瞬间消失，并且之后再也打不开了。
下面是官方代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// ...省略导入

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <PaperProvider>
      <View style={{...}}>
        <Menu
          visible={visible}
          onDismiss={() => setVisible(false)}
          anchor={<Button onPress={() => setVisible(true)}>Show menu</Button>}>
          <Menu.Item onPress={() => {}} title="Item 1" />
            // ...省略其他Menu.Item
        </Menu>
      </View>
    </PaperProvider>
  );
};

export default MyComponent;

解决方案

经过网络搜索之后也没有找到相关的问题原因，只能尝试 通过改变 key 让 React Native 每次渲染时都把 Menu 当成一个新的组件 ，清除原有的状态，解决了这个问题。
在 Menu 组件上添加 key 属性：

1
2
3
4
5
6
7
8
9


// ...省略前半部分
<Menu
  visible={visible}
  key={`menu-${visible}`}       // ← 核心修改
  onDismiss={() => setVisible(false)}
  anchor={<Button onPress={() => setVisible(true)}>Show menu</Button>}>
  <Menu.Item onPress={() => {}} title="Item 1" />
    // ...省略其他Menu.Item
</Menu>