Expo开发React Native应用：如何实现拍照/选图集成按钮？

核心结论 #

Expo没有直接提供单个原生按钮同时支持相机+相册切换的API，但可以通过expo-image-picker结合自定义UI轻松实现和主流应用一致的效果。

具体实现方案 #

1. 用系统弹窗做快速集成 #

点击单个按钮时，弹出包含「拍照」「相册选图」的选项菜单，用户选择后再调用对应的ImagePicker方法，代码示例：

import { ImagePicker } from 'expo-image-picker';
import { Alert, TouchableOpacity, Text } from 'react-native';

const showMediaSelector = async () => {
  Alert.alert(
    '选择图片',
    '',
    [
      {
        text: '拍照',
        onPress: async () => {
          // 先申请相机权限
          const perm = await ImagePicker.requestCameraPermissionsAsync();
          if (!perm.granted) return;
          
          const result = await ImagePicker.launchCameraAsync({
            allowsEditing: true,
            aspect: [4, 3],
          });
          if (!result.canceled) {
            // 处理选中的图片（比如上传或显示）
            console.log('拍照结果：', result.assets[0].uri);
          }
        },
      },
      {
        text: '从相册选择',
        onPress: async () => {
          // 先申请相册权限
          const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
          if (!perm.granted) return;
          
          const result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            aspect: [4, 3],
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
          });
          if (!result.canceled) {
            // 处理选中的图片
            console.log('相册选图结果：', result.assets[0].uri);
          }
        },
      },
      { text: '取消', style: 'cancel' },
    ],
    { cancelable: true }
  );
};

// 调用按钮
<TouchableOpacity onPress={showMediaSelector} style={{ padding: 10, backgroundColor: '#eee' }}>
  <Text>选择图片</Text>
</TouchableOpacity>

2. 自定义美观弹窗（可选） #

如果想要更贴近原生应用的底部弹窗样式，可以用expo-modal或者第三方UI库（比如react-native-modal）实现带图标的自定义菜单，交互体验会更直观。

关键注意事项 #

• 必须提前申请权限：iOS需要在app.json的infoPlist中添加相机和相册的权限描述；Android需要在permissions数组中声明对应权限，示例配置：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要访问相机拍摄图片",
        "NSPhotoLibraryUsageDescription": "需要访问相册选择图片"
      }
    },
    "android": {
      "permissions": ["CAMERA", "READ_EXTERNAL_STORAGE"]
    }
  }
}

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