React Native中如何使用map()从图片选择器返回数组中获取单张图片

解决方案 #

首先确认你使用的ImagePicker版本返回的选中结果为数组结构（仅选中1张时也会包裹在数组内），按以下步骤调整即可用map()实现单张图片渲染：

1. 调整状态定义 #

将原来存储单个图片对象的状态改为存储图片数组：

// 替换原来的uriImg状态定义
const [selectedImages, setSelectedImages] = useState([]);

2. 修改选中回调逻辑 #

适配数组类型的返回结果：

function imagePickerCallback(data) {
  if (data.didCancel) {
    console.log(`cancelado ${data}`)
    return;
  }

  if (data.error) {
    console.log(`Ocorreu um erro ${data}`)
    return;
  }

  // 兼容主流ImagePicker的assets数组返回结构，若接口直接返回数组可去掉data.assets判断
  const imageList = data.assets || data;
  if (!imageList || imageList.length === 0) {
    console.log(`未选中有效图片`)
    return;
  }

  setSelectedImages(imageList);
}

3. 用map()渲染图片 #

如果需要限制始终只渲染单张，就算选中多张也只取第一张，可在map前加slice(0,1)截取第一个元素

// 替换原来的单张Image渲染逻辑
{
  selectedImages.length > 0 ? 
  selectedImages.slice(0,1).map((imgItem, index) => (
    <Image 
      key={imgItem.uri || index}
      source={{ uri: imgItem.uri }}
      style={styles.placeholderImage}
    />
  )) : 
  <Image 
    source={{
      uri: 'https://socialistmodernism.com/wpcontent/uploads/2017/07/placeholder-image.png?w=640'
    }}
    style={styles.placeholderImage}
  />
}

<View style={styles.optionsCamera}>
  <TouchableOpacity
    style={styles.button}
    onPress={() => ImagePicker.launchCamera({},imagePickerCallback)}
  >
    <Text style={styles.buttonText}>Abrir câmera</Text>
  </TouchableOpacity>

  <TouchableOpacity
    style={styles.button}
    onPress={() => ImagePicker.launchImageLibrary({},imagePickerCallback)}
  >
    <Text style={styles.buttonText}>Escolher imagem</Text>
  </TouchableOpacity>
</View>

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