纸质菜单呈现但不可点击答案

【问题标题】：Paper menu rendered but not clickable纸质菜单呈现但不可点击
【发布时间】：2019-12-09 11:51:29
【问题描述】：

我在headerRight 的部分设置菜单如下：

const Tab1 = createStackNavigator({
  S1: {
    screen: CouponsScreen,
    navigationOptions: () => ({
      title: `Test`,
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerRight: (
        <CustomMenu/>
      ),
    }),
  },
});

我的菜单控件使用状态来可视化：

//state itself
  state = {
    visible: false,
  };

//class methods
  _openMenu = () => this.setState({visible: true});
  _closeMenu = () => this.setState({visible: false});

//render()  part:
      <Provider>
        <View>
          <Menu
            visible={this.state.visible}
            onDismiss={this._closeMenu}
            anchor={
              <DotsIcon
                onPress={this._openMenu}
                name="dots-three-vertical"
                color={Colors.WHITE}
                size={20}
              />
            }>
...

这基本上是来自https://callstack.github.io/react-native-paper/menu.html 的标准样本。知道为什么它不起作用吗？我的意思是显示控件 DotsIcon，但单击时没有任何反应。

【问题讨论】：

标签： javascript react-native react-native-paper

【解决方案1】：

我发现 ReactNative 提供了一种检查应用程序 DOM 的方法（使用 android、摇动设备、切换检查）。原来我的菜单项被 Context.Consumer 遮住了。当我从 render () 部分中删除 <Provider> 标记时，它终于起作用了（能够处理点击）。

可能值得一提：从一开始我的最顶层的 AppContainer 就是这样包装的：

      <PaperProvider>
        <StatusBar
          backgroundColor={Colors.TOOLBAR_BACKGROUND}
          barStyle="light-content"
        />
        <AppContainer />
      </PaperProvider>

【讨论】：