如何使用Expo Image Picker实现横向滚动的多图展示？

1. 调整状态与图片选择配置 #

先把单张图片的状态改为数组，同时在ImagePicker配置里开启多选：

// 将单图状态改为数组，存储所有选中图片的uri
const [images, setImages] = useState([]);

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    aspect: [1, 1],
    quality: 1,
    // 开启多选功能，这是实现多选的核心配置
    allowsMultipleSelection: true,
    // 可选：限制最大选择数量，比如最多选5张
    selectionLimit: 5
  });

  console.log(result);

  if (!result.canceled) {
    // 遍历选中的assets数组，提取每张图片的uri
    const selectedImages = result.assets.map(asset => asset.uri);
    setImages(selectedImages);
  }
};

2. 用FlatList实现横向滚动展示 #

替换原有的单图展示逻辑，用FlatList实现高效的横向滚动列表：

return (
  <View style={styles.container}>
    {/* 横向滚动的图片列表 */}
    {images.length > 0 && (
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false} // 隐藏横向滚动条
        data={images}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <Image source={{ uri: item }} style={styles.image} />
        )}
        contentContainerStyle={styles.imageListContainer}
      />
    )}
    <Button title="Pick From Media Library" onPress={pickImage} />
    <StatusBar style="auto" />
  </View>
);

3. 补充样式配置 #

添加合适的样式确保布局正常：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 50,
  },
  imageListContainer: {
    paddingVertical: 20,
    gap: 10, // 图片之间的间距
  },
  image: {
    width: 150,
    height: 150,
    borderRadius: 8,
    resizeMode: 'cover',
  },
});

关键问题说明 #

• 之前尝试的result.assets[0-4].uri是错误写法，数组不能通过0-4这种方式批量取值，必须用map遍历所有选中的asset提取uri。
• 横向滚动只需给FlatList设置horizontal属性即可实现，无需额外复杂操作。
• 如果添加allowsMultipleSelection后报错，检查expo-image-picker版本，确保是支持该属性的新版本，可执行npx expo install expo-image-picker更新依赖。

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