react native文件预览列表

react native文件预览列表

一、使用

let file = [
      {
        type: "pdf",
        path_YZ: "",
        title: "施工组织设计/(专项)施工方案报审表.pdf",
      },
      { type: "doc", path_YZ: "", title: "施工组织设计方案.doc" },
      { type: "png", path_YZ: "", title: "施工组织设计方案.png" },
    ];
<FileItem
    name={"表单"}
      value={file}
      navigation={this.props.navigation}
    />

二、效果

三、代码

/**
 * @author sxj
 * @date 2024-07-10
 * @description 附件列表--数组传值
 */
import React, { Component } from "react";
import {
  View,
  Text,
  ListView,
  Image,
  TouchableOpacity,
  Dimensions,
  StyleSheet,
} from "react-native";
const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;
class FileItem extends Component<Props> {
  static navigationOptions = {
    header: null,
  };

  constructor(props) {
    super(props);
    this.dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
  }

  itemClick(data) {
    //跳转文件打开页面
    this.props.navigation.navigate("WebViewCont", {
      data: data.path_YZ,
      title: data.title,
    });
  }

  renderListItem = (item, sectionID, rowID) => {
    let name = "";
    if (parseInt(rowID) === 0) {
      name = this.props.name;
    }
    //doc，pdf，xls，docx，jpg，png，zip
    let image;
    if (item.type === "doc" || item.type === "docx") {
      image = require("../../../resources/technicalManagement/word.png");
    } else if (item.type === "pdf") {
      image = require("../../../resources/technicalManagement/pdf.png");
    } else if (item.type === "xls" || item.type === "xlsx") {
      image = require("../../../resources/technicalManagement/excel.png");
    } else if (item.type === "jpg" || item.type === "png") {
      image = require("../../../resources/technicalManagement/jpg.png");
    } else if (item.type === "zip") {
      image = require("../../../resources/technicalManagement/zip.png");
    } else if (item.type === "ppt" || item.type === "pptx") {
      image = require("../../../resources/technicalManagement/pdf.png");
    } else if (item.type === "txt") {
      image = require("../../../resources/technicalManagement/word.png");
    }
    return (
      <TouchableOpacity
        onPress={() => {
          this.itemClick(item);
        }}
        key={rowID}
        style={{}}
      >      
        <View style={styles.bottom}>
          <Image style={styles.image} source={image} />
          <Text style={styles.bottomTitle}>{item.title}</Text>
        </View>
      </TouchableOpacity>
    );
  };
  render() {
    return (
      <View style={styles.fileWarp}>
        <Text style={styles.valueCenter}>{this.props.name}</Text>

        <View style={styles.row}>
          <ListView
            dataSource={this.dataSource.cloneWithRows(this.props.value)}
            renderRow={this.renderListItem}
            removeClippedSubviews={false}
            enableEmptySections={true}
          />
        </View>
      </View>
    );
  }
}

export default FileItem;
const styles = StyleSheet.create({
 
  bottom: {
    flex: 8,
    justifyContent: "flex-start",
    alignItems: "flex-start",
    flexDirection: "row",
    paddingLeft: 7,
    marginRight: 10,
    paddingTop: 5,
  },
  bottomTitle: {
    fontSize: 16,
    color: "#0F2646",
    marginLeft: 8,
    marginRight: 10,
    lineHeight:26,
  },
 
  image: {
    height: 17,
    width: 14,
    marginTop:5
  },
  
  fileWarp: {
    width: width - 30,
    marginHorizontal: 15,
    marginBottom:10,
    minHeight: 90,
    backgroundColor: "#fff",
    padding: 10,
    borderRadius:5,
  },
  valueCenter: {
    color: "#0F2646",
    fontSize: 16,
    fontWeight:'500'
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginTop:5,
  },
});