如何在Expo环境的React Native中实现类似Facebook的自定义Image Picker？

你要的完全自定义、App内直加载相册图片、自定义头部的效果，不需要依赖系统相册选择器，自己实现核心逻辑即可，分Expo和纯原生React Native两种场景给出实现步骤：

1. 核心实现思路 #

本质上就是绕开系统自带的图片选择组件，自己完成三个环节：

• 申请相册读写权限
• 主动读取本地相册所有图片资源
• 完全自定义头部、图片网格、选择逻辑等UI和交互

2. Expo 项目实现（你之前用过expo相关依赖，优先参考这个） #

所需依赖 #

用Expo官方的expo-media-library包读取相册资源，不需要额外原生配置。

步骤 #

• 安装依赖：执行npx expo install expo-media-library
• 配置权限：在app.json中添加权限说明

  // iOS 权限
  "ios": {
    "infoPlist": {
      "NSPhotoLibraryUsageDescription": "需要访问相册来选择图片"
    }
  },
  // 安卓权限
  "android": {
    "permissions": ["READ_MEDIA_IMAGES", "READ_EXTERNAL_STORAGE"]
  }
  

• 申请权限+读取相册图片

  import * as MediaLibrary from 'expo-media-library';
  
  // 申请权限
  const requestAlbumPermission = async () => {
    const { granted } = await MediaLibrary.requestPermissionsAsync();
    if (!granted) {
      alert('请开启相册权限后重试');
      return false;
    }
    return true;
  }
  
  // 拉取相册图片，支持分页
  const fetchAlbumImages = async (pageSize = 100, after = null) => {
    const res = await MediaLibrary.getAssetsAsync({
      mediaType: MediaLibrary.MediaType.photo,
      sortBy: [MediaLibrary.SortBy.creationTime], // 按创建时间倒序，最新的在前
      first: pageSize,
      after: after, // 分页游标
    });
    return {
      images: res.assets,
      nextCursor: res.endCursor,
      hasNextPage: res.hasNextPage
    }
  }
  

• 自定义UI
  顶部自己写头部栏，放置取消按钮、选择数量提示、确定按钮，完全自定义样式；主体部分用FlatList设置numColumns={4}做4列网格布局，渲染图片缩略图，每个图上加勾选选择态，自行处理多选、限选数量等逻辑。
  简易渲染示例：

  <FlatList
    numColumns={4}
    data={imageList}
    keyExtractor={item => item.id}
    onEndReached={loadMoreImages} // 滚动到底部加载下一页
    renderItem={({item}) => (
      <TouchableOpacity 
        style={{width: '25%', aspectRatio: 1}} 
        onPress={() => toggleSelectImage(item)}
      >
        <Image 
          source={{uri: item.uri}} 
          style={{width: '100%', height: '100%'}} 
          resizeMode="cover"
        />
        {/* 勾选框 */}
        {selectedImageIds.includes(item.id) && (
          <View style={{
            position: 'absolute', 
            top: 4, right:4, 
            width:20, height:20, 
            borderRadius:10, 
            backgroundColor: '#1877f2', // Facebook蓝
            alignItems: 'center', justifyContent: 'center'
          }}>
            <Text style={{color: '#fff', fontSize:12}}>✓</Text>
          </View>
        )}
      </TouchableOpacity>
    )}
  />
  

• 处理选择逻辑：维护一个选中图片的数组，点击图片时添加/移除，点击确定按钮时把选中的图片资源返回给业务逻辑即可。

3. 纯React Native（非Expo）项目实现 #

所需依赖 #

用官方维护的@react-native-camera-roll/camera-roll读取相册资源。

步骤 #

• 安装依赖：执行npm install @react-native-camera-roll/camera-roll --save，完成iOS和安卓的原生配置。
• 配置对应平台的相册权限，逻辑和Expo项目一致。
• 调用CameraRoll.getPhotos()方法读取相册图片，后续UI和交互逻辑和Expo项目完全一致。

优化建议 #

• 加载图片时优先用缩略图uri，不要直接加载原图，避免内存溢出导致闪退。
• 图片数量多的时候一定要做分页加载，不要一次性拉取所有图片。
• 可扩展相册切换功能，调用对应接口拉取所有相册分类，支持切换不同相册的图片。

内容的提问来源于stack exchange，提问作者Quang Khải Đàm