react native基于react-native-image-crop-picker 实现的视频多选

1 参考

• react-native-image-crop-picker Github仓库地址

2 效果

3 前言

• 主要是使用到了lodash 给的chunk 对数组进行了处理。然后使用map嵌套循环遍历数组创建多个视频的缩略图。

4 源码

/**
 * 多选 图片、视频
 */
import React, {
    useState, useEffect } from 'react';
import {
    View, TouchableOpacity, Image } from 'react-native';
import {
    pxToDp } from '../../utils/stylesKits';
import Icon from 'react-native-vector-icons/FontAwesome5';
import ImagePicker from 'react-native-image-crop-picker';
import _ from 'lodash';

interface Props {
   
  callBackVideo: any;
  style: any;
}

const Index = (props: Props) => {
   
  const [isShowColumn, setIsShowColumn] = useState(true);
  const [videoList, setVideoList] = useState([{
    path: 'first' }]);

  const [videoListShow, setVideoListShow] = useState([]);

  const pickImage = () => {
   
    ImagePicker.openPicker({
   
      multiple: true, //允许多选，在模拟器中无法多选
      mediaType: 'video' //仅选择视频
    }).then((res) => {
   
      let vL =