1 the reference

• React -native-image-crop-picker Github storage address

2 the effect

3 introduction

• The chunk given by Lodash is used to process the array. You then create thumbnails of multiple videos using a map nested loop through the set of numbers.

4 source

/** * select multiple images and videos */
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.// Multiple selections are allowed, not in the simulator
      mediaType: 'video' // Select only the video
    }).then((res) = > {
      let vL = [...videoList, ...res];

      https://www.cnblogs.com/yanggb/p/11464821.html / / delete elements
      _.remove(vL, function (n) {
        return n.path == 'first';
      });

      // I don't know why I have to filter like this
      const backList = vL.filter((item) = > {
        returnitem.path ! ='first';
      });
      props.callBackVideo(backList);

      vL.push({ path: 'first' });
      setVideoList(vL as []);
      setIsShowColumn(false);
    });
  };

  useEffect(() = > {
    // A data structure to facilitate page rendering
    const tempArr = _.chunk(videoList, 3);
    setVideoListShow(tempArr as []);
  }, [videoList]);

  const pickView = (index: number) = > {
    return (
      <TouchableOpacity
        style={{
          borderStyle: 'dashed',
          borderColor: 'black',
          width: pxToDp(96),
          height: pxToDp(96),
          borderWidth: 1.justifyContent: 'center',
          alignItems: 'center',
          borderRadius: 0.1
        }}
        key={index}
        onPress={pickImage}
      >
        <Icon name="plus" size={30} color="#E8E8E8" />
      </TouchableOpacity>
    );
  };

  /** * thumbnail display *@returns* /
  const itemDetailView = (path: string, index: number) = > {
    return (
      <View key={index} style={{ alignItems: 'center', marginRight: 15}} >
        <Image
          style={{ width: pxToDp(96), height: pxToDp(96), borderRadius: 10 }}
          source={{
            uri: path}} / >
        <TouchableOpacity
          style={{ width: pxToDp(20), position: 'absolute', top: pxToDp(- 10), left: pxToDp(86)}}onPress={()= >{ let tempList = videoList; _.remove(tempList, function (n) {return n.path == path; }); setVideoList(tempList); Const tempArr = _.chunk(tempList, 3); setVideoListShow(tempArr as []); }} ><Image
            style={{ width: pxToDp(20), height: pxToDp(20)}}source={require('@ /res/images/x.png')} / >
        </TouchableOpacity>
      </View>
    );
  };

  interface itemValue {
    path: string;
  }
  function itemView(item: [], index: number) :JSX.Element {
    return (
      <View
        style={{
          flexDirection: 'row',
          width: '100% ',alignItems: 'center',
          marginBottom: 15
        }}
        key={index}
      >{item.map((itemValue: itemValue, index2: number) => { if (itemValue.path == 'first') { return pickView(index2); } else { return itemDetailView(itemValue.path, index2); }})}</View>
    );
  }

  /** * The selected video thumbnail *@returns* /
  const videoLIstView = () = > {
    return videoListShow.map((item: [], index) = > {
      return itemView(item, index);
    });
  };

  return <View style={[props.style]}>{videoLIstView()}</View>;
};

Index.defaultProps = {
  callBackVideo: () = > {},
  style: {}};export default Index;

Copy the code

5 Demo

  pickVideo = (videoList: any) = > {
  
    console.log(videoList);
  };

      <PickVideo
          callBackVideo={this.pickVideo}
          style={{ marginTop: pxToDp(20), marginLeft: pxToDp(15), marginRight: pxToDp(15) }}
        />

Copy the code