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) }}
/>