阅读 120

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

1 参考

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 = [...videoList, ...res];

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

      //不知道为什么只能这样过滤
      const backList = vL.filter((item) => {
        return item.path != 'first';
      });
      props.callBackVideo(backList);

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

  useEffect(() => {
    //处理成方便页面渲染的数据结构
    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>
    );
  };

  /**
   * 缩略图展示
   * @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>
    );
  }

  /**
   * 被选中的视频缩略
   * @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;

复制代码

5 使用演示


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

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

复制代码
文章分类
前端