React Native 调起原生 Camera 和 PhotoLibrary 组件实现拍照和相册选图-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一个基于 React 构建的移动应用框架，可以帮助开发者快速构建跨平台应用。在移动应用开发中，调用原生组件是一项非常重要的技能。本文将介绍如何使用 React Native 调起原生 Camera 和 PhotoLibrary 组件实现拍照和相册选图。

1. 安装依赖

在开始之前，需要先安装相关依赖。打开终端，进入项目目录，执行以下命令：

# 安装 react-native-image-picker
npm install react-native-image-picker --save

# 链接原生模块
react-native link react-native-image-picker

2. 调起 Camera 组件实现拍照

在 React Native 中，可以使用 react-native-image-picker 库来调起原生 Camera 组件实现拍照。首先，需要在组件中引入该库：

import ImagePicker from 'react-native-image-picker';

然后，在需要调起 Camera 组件的地方，可以使用以下代码：

// javascriptcn.com 代码示例
const options = {
  title: '拍照',
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '拍照',
  chooseFromLibraryButtonTitle: '从相册选取',
  cameraType: 'back',
  mediaType: 'photo',
  quality: 1,
  maxWidth: 500,
  maxHeight: 500,
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

ImagePicker.showImagePicker(options, (response) => {
  if (response.didCancel) {
    console.log('用户取消了选择！');
  } else if (response.error) {
    console.log('ImagePicker 出错了：', response.error);
  } else {
    const source = { uri: response.uri };
    // 处理获取到的图片
  }
});

其中，options 是一个配置对象，用于设置 Camera 组件的相关属性，例如标题、按钮文字、照片质量等。ImagePicker.showImagePicker 方法用于调起 Camera 组件，并在用户完成拍照后返回拍摄结果。

在获取到拍摄结果后，可以通过 response.uri 获取到照片的本地路径，然后将其转换为可用的图片资源，例如：

const source = { uri: response.uri };
this.setState({ imageSource: source });

3. 调起 PhotoLibrary 组件实现相册选图

除了调起 Camera 组件实现拍照外，还可以使用 react-native-image-picker 库调起原生 PhotoLibrary 组件实现相册选图。与调起 Camera 组件类似，需要在组件中引入该库：

import ImagePicker from 'react-native-image-picker';

然后，在需要调起 PhotoLibrary 组件的地方，可以使用以下代码：

// javascriptcn.com 代码示例
const options = {
  title: '选择图片',
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '拍照',
  chooseFromLibraryButtonTitle: '从相册选取',
  mediaType: 'photo',
  quality: 1,
  maxWidth: 500,
  maxHeight: 500,
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

ImagePicker.launchImageLibrary(options, (response) => {
  if (response.didCancel) {
    console.log('用户取消了选择！');
  } else if (response.error) {
    console.log('ImagePicker 出错了：', response.error);
  } else {
    const source = { uri: response.uri };
    // 处理获取到的图片
  }
});

与调起 Camera 组件类似，options 是一个配置对象，用于设置 PhotoLibrary 组件的相关属性，例如标题、按钮文字、照片质量等。ImagePicker.launchImageLibrary 方法用于调起 PhotoLibrary 组件，并在用户完成选图后返回选图结果。

在获取到选图结果后，可以通过 response.uri 获取到照片的本地路径，然后将其转换为可用的图片资源，例如：

const source = { uri: response.uri };
this.setState({ imageSource: source });

4. 总结

本文介绍了如何使用 React Native 调起原生 Camera 和 PhotoLibrary 组件实现拍照和相册选图。通过本文的学习，读者可以掌握使用 react-native-image-picker 库调起原生组件的方法，以及如何处理获取到的图片资源。在实际开发中，可以根据需要对相关配置进行调整，以满足项目的需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65803396d2f5e1655db5ccaf