Question

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

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

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中提取数据并开始渲染菜单数据。

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

有人可以就此提出建议吗？是否可以使用我的局部变量进行渲染？

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

Answer 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 });
}

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

2 个答案: