是否可以根据组件状态打开菜单？在 react-native-popup-menu

问题描述

如何在没有菜单的情况下打开菜单

<MenuTrigger text='Select action' />

// your entry point
import { MenuProvider } from 'react-native-popup-menu';

export const App = () => (
  <MenuProvider>
    <YourApp />
  </MenuProvider>
);

// somewhere in your app
import {
  Menu,MenuOptions,MenuOption,MenuTrigger,} from 'react-native-popup-menu';

export const YourComponent = () => (
  <View>
    <Text>Hello World!</Text>
    <Menu>
      <MenuTrigger text='Select action' />
      <MenuOptions>
        <MenuOption onSelect={() => alert(`Save`)} text='Save' />
        <MenuOption onSelect={() => alert(`Delete`)} >
          <Text style={{color: 'red'}}>Delete</Text>
        </MenuOption>
        <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='disabled' />
      </MenuOptions>
    </Menu>
  </View>
);

doc 表示，菜单可以通过点击或调用上下文方法打开。

我想知道如何使用这个功能组件中的上下文方法。

解决方法

刚刚找到了一个很好的解决方案here

这是react-native-popup-menu提供的示例代码。

import React,{ Component } from 'react';
import { Text } from 'react-native';
import Menu,{
  MenuProvider,MenuOptions,MenuOption,MenuTrigger,} from 'react-native-popup-menu';

export default class ControlledExample extends Component {

  constructor(props,ctx) {
    super(props,ctx);
    this.state = { opened: true };
  }

  onOptionSelect(value) {
    alert(`Selected number: ${value}`);
    this.setState({ opened: false });
  }

  onTriggerPress() {
    this.setState({ opened: true });
  }

  onBackdropPress() {
    this.setState({ opened: false });
  }

  render() {
    const { opened } = this.state;
    console.log('ControlledExample - opened',opened)
    return (
      <MenuProvider
        style={{flexDirection: 'column',padding: 30}}>
        <Text>Hello world!</Text>
        <Menu
          opened={opened}
          onBackdropPress={() => this.onBackdropPress()}
          onSelect={value => this.onOptionSelect(value)}>
          <MenuTrigger
            onPress={() => this.onTriggerPress()}
            text='Select option'/>
          <MenuOptions>
            <MenuOption value={1} text='One' />
            <MenuOption value={2}>
              <Text style={{color: 'red'}}>Two</Text>
            </MenuOption>
            <MenuOption value={3} disabled={true} text='Three' />
          </MenuOptions>
        </Menu>
      </MenuProvider>
    );
  }

}

希望这会对其他人有所帮助。