React-Native: react-native-permissions

配置 

相关配置请查阅：react-native-permissions - npm

使用 

在 src/utils 目录下，新建 permissions.js

直接上代码

import {every, stubFalse, stubTrue} from 'lodash';
import {
  check,
  checkNotifications,
  PERMISSIONS,
  request,
} from 'react-native-permissions';
import {NativeModules, Platform} from 'react-native';

const checkRequestTable = (...permissions) => {
  console.log(permissions);
  return Promise.all(permissions.map(permission => check(permission)))
    .then(results => {
      console.log(results);
      return every(results, result => {
        switch (result) {
          case 'granted':
            return true;
          case 'denied':
            return false;
          default:
            return false;
        }
      });
    })
    .catch(stubFalse);
};

// 检查照相机
const checkCamera = Platform.select({
  ios: () => checkRequestTable(PERMISSIONS.IOS.CAMERA),
  android: () =>
    checkRequestTable(
      PERMISSIONS.ANDROID.CAMERA,
      PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE,
    ),
});

// 请求照相机
const requestCamera = Platform.select({
  ios: () => request(PERMISSIONS.IOS.CAMERA),
  android: async () => {
    const status1 = await request(PERMISSIONS.ANDROID.CAMERA);
    const status2 = await request(PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE);
    return {status1, status2};
  },
});

// 检查存储
const checkLibrary = Platform.select({
  ios: () =>
    checkRequestTable(
      PERMISSIONS.IOS.PHOTO_LIBRARY,
      PERMISSIONS.IOS.PHOTO_LIBRARY_ADD_ONLY,
    ),
  android: () => checkRequestTable(PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE),
});

// 请求存储
const requestLibrary = Platform.select({
  ios: async () => {
    const status1 = await request(PERMISSIONS.IOS.PHOTO_LIBRARY);
    const status2 = await request(PERMISSIONS.IOS.PHOTO_LIBRARY_ADD_ONLY);
    return {status1, status2};
  },
  android: () => request(PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE),
});

// 检查扫码
const checkCameraScan = Platform.select({
  ios: () =>
    checkRequestTable(PERMISSIONS.IOS.CAMERA, PERMISSIONS.IOS.MICROPHONE),
  android: () =>
    checkRequestTable(
      PERMISSIONS.ANDROID.CAMERA,
      PERMISSIONS.ANDROID.RECORD_AUDIO,
    ),
});

// 检查定位
const checkLocation = Platform.select({
  ios: () =>
    checkRequestTable(
      PERMISSIONS.IOS.LOCATION_ALWAYS,
      PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
    ),
  android: () =>
    checkRequestTable(
      PERMISSIONS.ANDROID.ACCESS_COARSE_LOCATION,
      PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
    ),
});

// 检查网络
const checkNetwork = () => {
  const {PermissionsModule} = NativeModules;
  PermissionsModule.networkPermission().then(stubTrue).catch(stubFalse);
};

// 检查通知
const checkNotification = () => {
  checkNotifications()
    .then(({status}) => status === 'granted')
    .catch(stubFalse);
};

export {checkCamera, requestCamera, checkLibrary, requestLibrary};

使用方法

在需要检查权限的页面文件下

// 导入需要用的方法
import {
  checkCamera,
  checkLibrary,
  requestCamera,
  requestLibrary,
} from 'src/utils/permissions';
import {openSettings} from 'react-native-permissions';

  // 我这里用了 import {ActionSheet, Modal, Portal} from '@ant-design/react-native';
  const showActionSheet = () => {
    const BUTTONS = ['拍照', '从相册中选取', '取消'];
    ActionSheet.showActionSheetWithOptions(
      {
        // title: 'Title',
        // message: 'Description',
        options: BUTTONS,
        cancelButtonIndex: 2,
      },
      async buttonIndex => {
        if (buttonIndex === 0) {
          // 1、请求权限 已有权限则不提示
          await requestCamera();
          // 2、检查权限
          const isGranted = await checkCamera();
          if (isGranted) {
            openCamera();
          } else {
            showAlertPermission();
          }
        } else if (buttonIndex === 1) {
          await requestLibrary();
          const isGranted = await checkLibrary();
          if (isGranted) {
            selectLibrary();
          } else {
            showAlertPermission();
          }
        }
      },
    );
  };

  // 如果权限没有被允许，弹窗提示打开设置去允许权限
  const showAlertPermission = () => {
    const modalAlert = Modal.alert(
      '提示',
      '权限获取失败,请打开设置允许相关权限',
      [
        {
          text: '取消',
          onPress: () => {
            console.log('cancel');
          },
          style: 'cancel',
        },
        {
          text: '确认',
          onPress: () => {
            console.log('ok');
            openSettings().then().catch();
          },
        },
      ],
    );
    // setTimeout(() => {
    //   Portal.remove(modalAlert);
    // }, 2000);
  };

网上说 @ant-design/react-native 的 Modal 显示的时候，用户操作Android物理返回键或者在屏幕左边右滑返回，Modal 不会消失。这个还没有测试，故注释代码里面的 Portal.remove(modalAlert) 可以在页面卸载的时候，关闭 Modal 弹出层。

报错

如果报错如下：

⚠  No permission handler detected.

• Check that you are correctly calling setup_permissions in your Podfile.
• Uninstall this app, reinstall your Pods, delete your Xcode DerivedData folder and rebuild it.

这个错误是出现在 iOS 安装 react-native-permissions 后，没有在 Podfile 写入配置代码导致，并且后续写入再次运行也是同样的错误。原因是运行编译的时候，编译内容已经存入你的模拟器数据中了，根据提示

1、卸载 APP

2、在 ios 目录下 重新 pod install

3、在 /Users/你的设备名/Library/Developer/Xcode/DerivedData 删除对应APP的数据文件。

4、重新编译运行。