0

我正在寻找使用 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>
    );
  }
4

0 回答 0