如何使用react-native-image-crop-picker关闭/取消相机胶卷及图库选择器

解决方案 #

react-native-image-crop-picker 默认自带取消关闭图库/裁剪页的能力，找不到取消按钮通常是配置缺失或样式适配问题，按以下步骤修复即可：

• 首先补全错误捕获逻辑，用户点击取消时，该库会抛出E_PICKER_CANCELLED类型的错误，你需要在调用链上增加catch分支处理取消场景，修改后的代码参考：

const pickImage = () => {
   ImagePicker.openPicker({
      width: 400,
      height: 250,
      cropping: true,
      // 明确配置取消按钮文案，解决文字与背景撞色看不到的问题
      cancelButtonTitle: "取消", // 适配iOS端相册页取消按钮文案
      cropperCancelText: "取消", // 适配安卓端裁剪页取消按钮文案
      // 注意：如果之前配置了 hideBottomControls: true 请删除，该参数会隐藏底部操作按钮
   }).then(image => {
      onFilePicked(image);
    }).catch(error => {
      // 用户主动取消的情况，可直接返回无需额外处理
      if (error.code === 'E_PICKER_CANCELLED') return
      // 其他错误（如权限拒绝）可在此处添加自定义提示逻辑
      console.log('图片选择失败：', error)
    });
}

• 检查系统样式适配：
  • iOS端默认支持下拉关闭相册模态页，如果你之前手动配置了modalPresentationStyle: 'fullScreen'可以移除，保留默认的pageSheet样式即可支持下拉关闭操作
  • 安卓端如果取消按钮看不到，可通过cropperToolbarColor、cropperCancelTextColor参数调整导航栏背景色和取消按钮文字颜色，避免深色模式下两者撞色
• 如果上述配置都生效后仍无取消按钮，检查你的组件版本，低于v0.39.0的版本存在部分机型取消按钮不显示的兼容问题，升级到最新稳定版即可修复。

内容的提问来源于stack exchange，提问作者Sam