React Native集成第三方库实现图片选择器

本示例演示了如何在React Native项目中集成第三方库react-native-image-picker，以实现简单而强大的图片选择器功能。通过该功能，用户可以从相册或相机中选择图片，并在应用中进行展示。

// 导入必要的组件和第三方库
import React, { useState } from 'react';
import { View, Image, Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

// 定义图片选择器组件
const ImageSelector = () => {
  // 定义状态来存储选择的图片
  const [selectedImage, setSelectedImage] = useState(null);

  // 打开图片选择器的函数
  const openImagePicker = () => {
    ImagePicker.showImagePicker({
      title: '选择图片',
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: '拍照',
      chooseFromLibraryButtonTitle: '从相册选择',
    }, response => {
      if (response.didCancel) {
        console.log('用户取消了图片选择');
      } else if (response.error) {
        console.error('图片选择器出现错误:', response.error);
      } else {
        // 更新选择的图片状态
        setSelectedImage(response.uri);
      }
    });
  };

  return (
    <View>
      {/* 展示选择的图片 */}
      {selectedImage && <Image source={{ uri: selectedImage }} style={{ width: 200, height: 200 }} />}

      {/* 打开图片选择器的按钮 */}
      <Button title="选择图片" onPress={openImagePicker} />
    </View>
  );
};

export default ImageSelector;

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com