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