react-native-image-picker权限介绍

React Native是一款优秀的移动开发框架，它可以帮助开发者快速搭建跨平台app。而 react-native-image-picker 是在 React Native 应用中提供图像选择器的轻量级、易于使用的库。但是，要使用它，需要给应用程序添加相应的权限。

Android 权限

在 Android 上，我们需要获取 READ_EXTERNAL_STORAGE 和 WRITE_EXTERNAL_STORAGE 权限。因为从相册或相机中选择图片时，应用需要读取本地储存中的图片并将新图片保存到储存空间。

在 AndroidManifest.xml 文件中添加以下内容，以获得必需的权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example"
   android:versionCode="1"
   android:versionName="1.0"> 
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-sdk
       android:minSdkVersion="16"
       android:targetSdkVersion="29" />
   <application
   ...

iOS 权限

在 iOS 上，我们需要获取访问库和相机的权限。在 info.plist 文件中添加以下内容，以获得必需的权限：

<key>NSCameraUsageDescription</key>
<string>授权访问相机以拍照</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>授权访问相册以选择图片</string>

此外，在 ios / [ProjectName] / info.plist 中添加以下键。这些键是必需的，但它们的内容可以根据您的需求进行更改：

<key>CFBundleDisplayName</key>
<string>[APP NAME]</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleVersion</key>
<string>$(CURRENT_PROJECT_VERSION)</string>

使用 react-native-image-picker 权限

完成了 Android 和 iOS 的权限设置后，就可以使用 react-native-image-picker 来选择图片了。

import React, { useState } from 'react';
import { Button, Image, View, Platform } from 'react-native';
import ImagePicker from 'react-native-image-picker';

const App = () => {
  const [source, setSource] = useState(null);
  const options = {
    title: 'Select Avatar',
    storageOptions: {
      skipBackup: true,
      path: 'images',
    },
  };

  const selectImage = () => {
    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri };

        setSource(source);
      }
    });
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      {source && <Image source={source} style={{ width: 200, height: 200 }} />}
      <Button title="Select Image" onPress={selectImage} />
    </View>
  );
};

export default App;

在上面的示例中，我们使用了 ImagePicker.showImagePicker 方法，该方法会在用户选择图片后返回一个 response 对象。如果有错误或用户取消了选择，我们也会从 response 对象中获得对应的信息。

最终我们会获得选中图片的 URI，并将其设置为 source 状态，从而在 UI 上显示它。

参考：

• react-native-image-picker GitHub
• Android 权限
• iOS 权限