如何使用react-native-popup-menu

时间:2019-04-20 18:41:14

标签: javascript react-native react-native-flatlist popupmenu react-native-popup-menu

我正在寻找一个使用react-native-popup-menu从FlatList调用弹出菜单的选项。大多数示例和github参考可能是基于这样的假设,即您仅在应用程序屏幕上显示弹出菜单,而没有其他显示。

访问了数十页后,我从该页获得了一些线索:https://github.com/instea/react-native-popup-menu/blob/master/examples/MenuMethodsExample.js

并提出以下解决方案。如果有人可以改善这一点,那就太好了。否则,我发布此邮件的想法是像我这样的其他人可能会觉得这很有用。

以下是相关代码的摘录:

class App extends React.Component {
    componentWillUnmount = () => {
      sound.release();
    };
    render() {
    return (
      <MenuProvider>
        <AppContainer />
      </MenuProvider>
    );
  }
}

// JS文件

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

  onOptionSelect(Param1, Param3, Param3) {
    this.menu.close();
    Toast.show(` ${value}, ${fileName}, ${fileDesc}`);
    if (value === 1) {
      this.playMyAudioFile(fileName)
    }
    return false;
  }

  onRef = r => {
    this.menu = r;
  }
  playMyAudioFile (fileName ) {

     // Play Audio File Code

  }

  render() {

    return (

      <View style={styles.container}>

        <View style={{flex: 1, flexDirection: 'row'}}>
        <FlatList
              data={audioMenu}
              extraData={this.state}
              ItemSeparatorComponent={Divider}
              renderItem={({item}) =>
              (
                <Menu onSelect={value => this.onOptionSelect(value, item.AudioFile, item.Desc)}
                ref={this.onRef}>
                <MenuTrigger style={styles.menuItemsLP} text={item.Desc)}/>
                <MenuOptions>
                  <MenuOption value={1} text='Play' />
                  <MenuOption value={2} text='Download' />
                  <MenuOption value={3} text='Download Externally' />
                </MenuOptions>
                </Menu>       

              )}
              keyExtractor={(item, index) => index.toString()}
            />
        </View>
      </View>
    );
  }

0 个答案:

没有答案