在React Native应用中如何实现长按应用图标弹出操作选项功能？

你要实现的是移动端系统级的桌面App图标快捷操作，iOS端称为Home Screen Quick Actions，安卓端称为App Shortcuts，可以通过成熟的第三方封装库快速实现，无需自行开发原生桥接代码。

实现步骤 #

1. 依赖安装 #

选用跨端兼容库react-native-quick-actions，执行如下命令安装：

npm install react-native-quick-actions --save

React Native 0.60及以上版本会自动完成原生链接，低版本需额外执行react-native link react-native-quick-actions完成配置。

2. 快捷项配置 #

支持两种配置方式，可根据需求选择：

• 静态配置：直接在原生工程配置文件中写入固定的快捷选项，安装App后就会生效，无需启动App加载

  iOS端：在Info.plist中添加UIApplicationShortcutItems数组，为每个快捷项配置标题、图标、唯一标识字段
  安卓端：在res/xml目录下新建shortcuts.xml，注册对应的静态快捷项，关联App启动Activity

• 动态配置：在JS代码中灵活配置快捷项，支持根据用户身份、运营活动动态调整选项内容，示例代码如下：

import QuickActions from 'react-native-quick-actions';

// 初始化时设置快捷项
const shortcutItems = [
  {
    type: 'scan_qr', // 唯一标识，用于判断用户点击的选项
    title: '扫码',
    icon: 'scan_icon', // 对应原生资源目录下的图标文件名
  },
  {
    type: 'my_package',
    title: '套餐',
    icon: 'package_icon',
  },
  {
    type: 'discount',
    title: '优惠',
    icon: 'discount_icon',
  }
];
QuickActions.setShortcutItems(shortcutItems);

3. 快捷点击事件监听 #

需要分别处理App冷启动、后台唤醒两种场景下的快捷操作点击：

// 处理App未启动时，点击快捷项冷启动的场景
QuickActions.popInitialAction().then(shortcut => {
  if (shortcut) {
    // 根据shortcut.type执行对应逻辑，比如跳转到扫码页
    handleShortcutJump(shortcut.type);
  }
});

// 处理App在后台运行时，点击快捷项唤醒App的场景
QuickActions.on('shortcutPress', (shortcut) => {
  handleShortcutJump(shortcut.type);
});

注意事项 #

• 系统版本要求：安卓7.1及以上、iOS9.0及以上系统支持该特性，低版本系统不会显示快捷选项，不影响App正常运行
• 图标资源需要提前按照原生规范放入两端原生工程的资源目录中，命名和代码中配置的icon字段保持一致
• 动态配置的快捷项会覆盖静态配置的内容，可根据业务需求灵活选择配置方式

内容的提问来源于stack exchange，提问作者Muhammad Rafeh Atique