react native文件预览列表

在React Native中创建一个文件预览列表，你可以使用FlatList组件来渲染文件列表，并为每个文件渲染一个可点击的预览组件。以下是一个简单的示例：

import React, { useState } from 'react';
import { FlatList, View, Text, TouchableOpacity } from 'react-native';
 
const FilePreview = ({ file, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View>
        <Text>{file.name}</Text>
      </View>
    </TouchableOpacity>
  );
};
 
const FileList = () => {
  const [files, setFiles] = useState([
    { id: 1, name: 'Document 1.pdf' },
    { id: 2, name: 'Image 2.jpg' },
    // ...更多文件
  ]);
 
  const renderItem = ({ item }) => (
    <FilePreview file={item} onPress={() => console.log('File preview:', item)} />
  );
 
  return (
    <FlatList
      data={files}
      keyExtractor={item => item.id.toString()}
      renderItem={renderItem}
    />
  );
};
 
export default FileList;

在这个例子中，FileList组件使用了React的useState钩子来管理一个文件列表的状态。FlatList用于渲染文件列表，FilePreview组件用于单个文件的渲染和交互。点击任何文件将在控制台中打印出相应的文件信息。根据需求，你可以替换console.log部分以实现具体的文件预览逻辑。