纸质菜单呈现但不可点击

Question

我正在这样设置 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，但点击后没有任何反应。

Answer 1

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

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

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

纸质菜单呈现但不可点击

Paper menu rendered but not clickable

javascript

react-native

react-native-paper