React Native Paper - Menu 组件 visible 踩坑记录
问题描述
最近在尝试使用 React Native Paper 的 Menu 组件，发现了一个比较坑的地方，我们先来看按照官方文档中的示例代码编写的效果：
可以看到，第一次点击按钮打开 Menu 是正常的，但是在关闭之后再次点击按钮时，Menu 会瞬间消失，并且之后再也打不开了。
下面是官方代码：
// ...省略导入
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 属性：
// ...省略前半部分
<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>
暂时还没有评论哦