react-navigation 标头上的 React-native-popup-menu答案

【问题标题】：React-native-popup-menu on react-navigation headerreact-navigation 标头上的 React-native-popup-menu
【发布时间】：2017-11-24 19:20:17
【问题描述】：

我正在使用带有 react-navigation 的 redux，并希望在用户单击 react-navigation 标题右键按钮上的按钮时显示弹出窗口。

我将上下文菜单包装在我的应用程序的根目录中，如下所示

return (
      <Provider store={store}>
          <MenuContext style={{ flex: 1 }}>
              <AppWithNavigationState />
          </MenuContext>
      </Provider>
    )

在我的一个屏幕上，我有

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

当用户点击右键时，应该是这样的

菜单项是动态的，我必须从我的一个 API 中提取数据并开始渲染菜单数据。

我已经在网上阅读了它可以使用上下文方法来实现，但我不确定如何在我的结构中实现它。

有人可以就这方面给我建议吗？是否可以用我的局部变量来渲染它？

【问题讨论】：

标签： react-native

【解决方案1】：

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>,

【讨论】：

我使用了相同的 npm。 issue面向Android真机:(

【解决方案2】：

最自定义的方式是使用Modal，当单击右键时，称为this.refs.modalRef.showModal()，在您当前的页面中：

<View>
    <PopupModal ref="modalRef" />
</View>

PopupModal 是这样的：

export default class PopupModal extends Component {
    state = {
      show: false,
    }
    showModal() {
      this.setState({show: true});
    }
    closeModal = () => {
      this.setState({show: false});
    }
    return (
        <Modal
          transparent
          visible={this.state.show}
          onRequestClose={this.closeModal}
        >
            <TouchableWithoutFeedback onPress={this.closeModal}>
                <View style={{
                    width: '100%',
                    height: '100%',
                    opacity: 0.5,
                    backgroundColor: 'gray',
                }} />
            </TouchableWithoutFeedback>
            <View></View> // your designed view, mostly position: 'absolute'
        </Modal>
    );    
}

你也可以通过this.refs.modalRef.showModal(data)将一些数据传递给PopupModal，在PopupModal中：

showModal = (data) => {
  this.setState({ data, show: true });
}

【讨论】：