react-navigation标题上的React-native-popup-menu

Dar*_*Lau 6 react-native

我正在使用带有react-navigation的redux,并且想要在用户单击react-navigation header右按钮上的按钮时显示弹出窗口.

我在我的应用程序的根目录中包含了上下文菜单,如下所示

return (
      <Provider store={store}>
          <MenuContext style={{ flex: 1 }}>
              <AppWithNavigationState />
          </MenuContext>
      </Provider>
    )
Run Code Online (Sandbox Code Playgroud)

在我的一个屏幕上,我有

static navigationOptions = {
        headerTitle: 'News',
        headerRight: (
          <TouchableOpacity style={{ paddingLeft:15, paddingRight:15 }}>
              <Icon name="more-vert" size={30} color="black" />
          </TouchableOpacity>
        ),
    }
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

当用户点击右键时,我应该是这样的在此输入图像描述

菜单项是动态的,我将不得不从我的一个API中提取数据并开始渲染菜单数据.

我通过在线阅读它可以使用上下文方法实现,但我不知道如何在我的结构中实现它.

任何人都可以告诉我这个吗?是否可以使用我的局部变量进行渲染?

Vya*_*ddy 0

https://www.npmjs.com/package/react-native-material-menu 它对我有用

 headerRight:<View  style={{marginRight:10}}>
        <Menu
            ref={this.setMenuRef}
            button={<Text onPress={this.showMenu}><Icon style={{color:screenProps.headerTitleStyle.color,fontSize:25,marginRight:5}} name="md-more"/></Text>}
        >
            <MenuItem onPress={this.hideMenu}>Rate Us</MenuItem>
            <MenuItem onPress={this.hideMenu}>Share App</MenuItem>
            <MenuItem onPress={this.hideMenu}>Settings</MenuItem>
        </Menu>
    </View>,
Run Code Online (Sandbox Code Playgroud)