React Native Popover

一个跨平台的React Native弹出菜单组件，支持iOS和Android平台。

预览

功能特性

• ✅ 支持iOS和Android平台
• ✅ 自定义菜单样式（宽度、圆角、颜色等）
• ✅ 选中状态显示和自定义选中颜色
• ✅ 文本对齐、字体大小、行高等配置
• ✅ 点击外部区域自动关闭
• ✅ 支持动画效果
• ✅ TypeScript支持
• ✅ 提供便捷的Hook API

安装

npm install @see_you/react-native-popover
# 或
yarn add @see_you/react-native-popover

iOS 安装

cd ios && pod install

使用方法

方法一：使用 Hook（推荐）

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { useNativePopover } from 'react-native-popover';

const MyComponent = () => {
  const [showPopover, anchorRef, selectedIndex, setSelectedIndex] = useNativePopover();

  const handleShowMenu = async () => {
    const result = await showPopover(
      ['选项 1', '选项 2', '选项 3', '选项 4'],
      1, // 默认选中的索引
      {
        menuWidth: 200,
        menuCornerRadius: 8,
        textColor: '#262626',
        backgroundColor: '#FFFFFF',
        selectedTextColor: '#FF891F',
        // ... 更多配置选项
      }
    );
    
    if (result !== null) {
      console.log('选中的索引:', result);
      setSelectedIndex(result);
    }
  };

  return (
    <View>
      <TouchableOpacity ref={anchorRef} onPress={handleShowMenu}>
        <Text>点击显示菜单</Text>
      </TouchableOpacity>
      <Text>当前选中: {selectedIndex}</Text>
    </View>
  );
};

方法二：直接调用 API

import { showPopover } from 'react-native-popover';
import { findNodeHandle } from 'react-native';

// 在你的组件中
const buttonRef = useRef(null);

const handleShowPopover = async () => {
  try {
    const anchorViewId = findNodeHandle(buttonRef.current);
    if (anchorViewId) {
      const selectedIndex = await showPopover({
        anchorViewId,
        menuItems: ['选项 1', '选项 2', '选项 3'],
        index: 1, // 默认选中的索引
        config: {
          menuWidth: 200,
          menuCornerRadius: 8,
          textColor: '#262626',
          backgroundColor: '#FFFFFF',
          selectedTextColor: '#FF891F',
          // ... 更多配置选项
        }
      });
      console.log('选中的索引:', selectedIndex);
    }
  } catch (error) {
    console.error('显示popover失败:', error);
  }
};

API 文档

useNativePopover Hook

返回一个包含以下元素的数组：

• showPopover: 显示弹出菜单的函数
• anchorRef: 用于绑定锚点视图的ref
• selectedIndex: 当前选中的索引
• setSelectedIndex: 设置选中索引的函数

参数

• showPopover(menuItems, config?)
  • menuItems (string[]): 菜单项数组
  • config (PopOverMenuConfiguration): 可选的菜单配置

返回值

Promise<number | null>: 返回选中的菜单项索引，如果用户取消或出错则返回null

showPopover(options)

显示弹出菜单并返回选中的索引。

参数

• anchorViewId (number): 锚点视图的原生ID
• menuItems (string[]): 菜单项数组
• index (number): 默认选中的菜单项索引
• config (PopOverMenuConfiguration): 菜单配置选项

返回值

Promise: 返回选中的菜单项索引，如果用户取消则返回-1

PopOverMenuConfiguration

属性	类型	默认值	说明
menuWidth	number	160	菜单宽度
menuCornerRadius	number	8	菜单圆角半径
textColor	string	'#262626'	文本颜色
backgroundColor	string	'#FFFFFF'	背景颜色
borderColor	string	'#E6E6E6'	边框颜色
borderWidth	number	0	边框宽度
padding	object	{top: 0, left: 16, bottom: 0, right: 16}	内边距
rowHeight	number	48	行高
textFont	object	{fontSize: 15, fontWeight: 500}	文本字体
textAlignment	'left' | 'center' | 'right'	'left'	文本对齐方式
animationDuration	number	0.2	动画持续时间（秒）
selectedTextColor	string	'#FF891F'	选中项的文本颜色
separatorColor	string	'#E6E6E6'	分隔线颜色
checkIconSize	number	16	选中图标大小
shadowColor	string	-	阴影颜色（仅iOS）
shadowOpacity	number	-	阴影不透明度（仅iOS）
shadowRadius	number	-	阴影半径（仅iOS）
shadowOffsetX	number	-	阴影X轴偏移量（仅iOS）
shadowOffsetY	number	-	阴影Y轴偏移量（仅iOS）

平台实现

iOS

使用 UIView 实现，提供原生的弹出菜单体验。

Android

使用 PopupWindow 实现，支持自定义样式和动画效果。

示例

查看 example/src/App.tsx 文件获取完整的使用示例。

开发

# 安装依赖
yarn install

# 运行示例
cd example
yarn ios
# 或
yarn android

许可证

MIT