React Native图片选择器示例及常见问题解决方案

这个示例展示了如何在React Native应用中集成图片选择器，并解答了常见问题，如权限获取和文件处理。通过使用react-native-image-picker库，用户可以轻松选择设备上的图片，并在应用中进行处理。

// 导入所需模块
import React, { useState } from 'react';
import { View, Button, Image, PermissionsAndroid } from 'react-native';
import ImagePicker from 'react-native-image-picker';

const App = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  // 请求权限并打开图片选择器
  const handleImageSelect = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        {
          title: 'Permission Needed',
          message: 'This app needs access to your photos.',
          buttonPositive: 'OK',
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        ImagePicker.showImagePicker({}, (response) => {
          if (response.didCancel) {
            console.log('用户取消了选择图片');
          } else if (response.error) {
            console.log('图片选择器错误: ', response.error);
          } else {
            setSelectedImage(response.uri);
          }
        });
      } else {
        console.log('无法获取存储权限');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  return (
    <View>
      <Button title="选择图片" onPress={handleImageSelect} />
      {selectedImage && <Image source={{ uri: selectedImage }} style={{ width: 200, height: 200 }} />}
    </View>
  );
};

export default App;

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