javascript - 纸质菜单呈现但不可点击

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 遮住了。当我<Provider>从我的部分中删除标签时render ()，它终于起作用了（能够处理点击）。

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

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