探索 React Native Popover Menu: 灵活、高效的选择菜单实现

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
const PopoverMenu = ({ options, onSelect, visible, onClose }) => {
  return (
    <View style={[styles.container, visible && styles.visible]}>
      {options.map((option, index) => (
        <TouchableHighlight
          key={index}
          onPress={() => {
            onSelect(option);
            onClose();
          }}
        >
          <Text style={styles.option}>{option.title}</Text>
        </TouchableHighlight>
      ))}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'white',
    padding: 10,
    visibility: 'hidden'
  },
  visible: {
    visibility: 'visible'
  },
  option: {
    padding: 10,
    fontSize: 18,
    color: 'black'
  }
});
 
export default PopoverMenu;

这个代码实例展示了如何创建一个简单的弹出式菜单组件，它接受一个选项数组和两个回调函数（onSelect 和 onClose）。它使用了React Native的StyleSheet来定义样式，并且使用了TouchableHighlight组件来处理点击事件。这个例子是React Native开发中一个常见且有用的模式。