Expo CLI环境下React Native相机与图库选择器故障解决方案咨询

核心说明 #

用Expo CLI创建的Managed Workflow项目默认不会生成iOS/Android原生文件夹，所有权限和原生配置都通过app.json统一管理，无需手动修改原生文件。最简方案直接使用Expo官方维护的expo-image-picker库，适配性最强。

步骤1：安装依赖 #

执行命令安装官方图库/相机选择器库：

npx expo install expo-image-picker

步骤2：配置权限 #

在项目根目录的app.json中，添加iOS和Android的权限声明：

{
  "expo": {
    // 保留原有配置，新增以下内容
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要访问相机拍摄照片",
        "NSPhotoLibraryUsageDescription": "需要访问相册选择照片"
      }
    },
    "android": {
      "permissions": [
        "CAMERA",
        "READ_EXTERNAL_STORAGE",
        "WRITE_EXTERNAL_STORAGE"
      ],
      "androidManifest": {
        "uses-feature": [
          {
            "name": "android.hardware.camera",
            "required": false
          },
          {
            "name": "android.hardware.camera.autofocus",
            "required": false
          }
        ]
      }
    }
  }
}

• iOS必须配置权限描述，否则App会直接崩溃；
• Android权限声明后，Expo会自动处理原生Manifest配置，无需手动修改。

步骤3：实现基础功能 #

以下是最简使用示例，包含相册选择和相机拍摄功能：

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

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

  // 从相册选择照片
  const pickFromGallery = async () => {
    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permission.granted) {
      alert('请允许访问相册权限');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      setSelectedImage(result.assets[0].uri);
    }
  };

  // 相机拍摄照片
  const takePhoto = async () => {
    const permission = await ImagePicker.requestCameraPermissionsAsync();
    if (!permission.granted) {
      alert('请允许访问相机权限');
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      setSelectedImage(result.assets[0].uri);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20 }}>
      <Button title="从相册选择" onPress={pickFromGallery} />
      <Button title="相机拍摄" onPress={takePhoto} />
      {selectedImage && (
        <View>
          <Text>选中的图片：</Text>
          <Image source={{ uri: selectedImage }} style={{ width: 200, height: 200 }} />
        </View>
      )}
    </View>
  );
}

注意事项 #

1. 确保Expo CLI为最新版本：执行npx expo upgrade更新项目依赖；
2. 测试时使用Expo Go App即可，无需构建原生包；
3. 若需自定义原生功能，再考虑切换到Bare Workflow（执行npx expo eject生成原生文件夹），但Managed Workflow已满足绝大多数场景需求。

内容的提问来源于stack exchange，提问作者JulesUK