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