Как вызвать всплывающее меню из FlatList с помощью response-native-popup-menu - PullRequest
Новая
       36

Как вызвать всплывающее меню из FlatList с помощью response-native-popup-menu

0 голосов
/ 20 апреля 2019

Я искал опцию для вызова всплывающего меню из FlatList с использованием response-native-popup-menu.Большинство примеров и ссылок на 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 file 

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