React Native 实现图片上传功能示例及技术解答

这个示例演示了如何使用 React Native 实现图片上传功能。通过调用相机或相册选择图片，并将其上传到服务器。这种功能在许多应用程序中都是常见的，尤其是社交媒体、电子商务和多媒体应用中。

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

export default function ImageUploadExample() {
  const [selectedImage, setSelectedImage] = useState(null);

  const pickImage = async () => {
    let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (permissionResult.granted === false) {
      alert('需要访问相册权限！');
      return;
    }

    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });

    if (!pickerResult.cancelled) {
      setSelectedImage(pickerResult.uri);
      // 在这里可以添加上传图片的逻辑
      console.log('选中图片:', pickerResult);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="选择图片" onPress={pickImage} />
      {selectedImage && <Image source={{ uri: selectedImage }} style={{ width: 200, height: 200, marginTop: 20 }} />}
    </View>
  );
}

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