方法
#setDocumentItemComponent(文档项组件)
您可以使用此钩子在文档列表屏幕中添加自定义文档组件,如图像组件。
参数:
名称 | 类型 | 描述 |
---|---|---|
DocumentItemComponent |
React.ComponentType<DocumentItemComponentProps> |
实例
//在custom_code/components/ documenttem .js中导入React, {useState, useRef, useCallback} from " React ";import {link, Text, View} from "react-native";import {fontwights, DEVICE_HEIGHT, DEVICE_WIDTH} from "@src/styles/global";import {renderImageJSX, navigateHandler, truncate, getIcon} from "@src/components/Documents/utils";import Icon from "@src/components/Icon";import PortaledScrollableModal from "@src/components/Modals/PortaledScrollableModal";import {TouchableOpacity, TouchableWithoutFeedback} from "react-native-gesture-handler";import {BubbleIcon} from "@src/components/BubbleIcon";从"@src/components/Documents/DocumentSingle"中导入DocumentSingle;import DocumentMove from "@src/components/Documents/DocumentMove"; const len = () => { if (DEVICE_WIDTH < 600) { return 30; } if (DEVICE_WIDTH < 415) { return 25; } if (DEVICE_WIDTH < 376) { return 20; } return 35; }; const DocumentItem = ({ viewModel, global, colors, navigation, formatDateFunc, token, t, profileUserId, currentUserId, isGroup, item }) => { const [moveModalVisible, setMoveModalVisible] = useState(false); const openMoveModal = useCallback(() => { setMoveModalVisible(true); }, []); const closeMoveModal = useCallback(() => { setMoveModalVisible(false); }, []); const modalRef = useRef(); const handleClose = () => { modalRef.current.close(); }; const handleOpen = () => { modalRef.current.open(); }; const filename = viewModel.type === "folder" ? [viewModel.title, ""] : truncate(viewModel.filename, len(), "..."); return ( <> {viewModel.svgIcon ? ( renderImageJSX(viewModel.svgIcon, 34, colors.textIconColor)() ) : ( )} navigateHandler( viewModel, navigation, handleOpen, profileUserId, currentUserId, isGroup ) } > {filename} {!!viewModel.groupId && !isGroup && ( {viewModel.groupName} )} {viewModel.displayName} {formatDateFunc(viewModel.dateModified)} //Add more details Size: {viewModel.size} Privacy: {viewModel.visibility} //Add download link Download Linking.openURL(item.download_url)}> {item.download_url} {viewModel.type === "folder" && ( )} {!!viewModel ? ( ) : null} > ); }; export default DocumentItem; //In custom_code/index.js ... import DocumentItem from "./components/DocumentItem"; export const applyCustomCode = externalCodeSetup => { externalCodeSetup.documentsScreenApi.setDocumentItemComponent((props) => ) }