如何在反应原生组件中显示来自本地存储的文件预览？

Question

我正在开发一个应用程序，其中有一个上传按钮，用户可以通过该按钮 select 将文件发送到服务器。 但是在发送文件之前，我想在上传按钮下方显示文件的预览。 那如何实施？ 我不想单独预览它。它应该在反应原生组件内的上传按钮下方可见。

Answer 1

我假设，您正在使用这个 package react-native-image- picker 。

const handleCaptureImage = () => {
    ImagePicker.showImagePicker({
      title: 'Take picture',
      chooseFromLibraryButtonTitle: 'Choose picture from gallery',
  
    }, response => {
      if (response.didCancel) {
          
      } else if (response.error) {
          console.log(response.error)
      } else {
          let source = { uri: response.uri };
          let data = {
              source: source,
              response: response,
              taken:true,
              mode:0 // For Image Capture
          };
          setimageURI(data);
      }
  });
   }

<Image
        source={imageURI.source}
        style={_._dpcontainer}
        resizeMode='contain'
      />

即使你没有使用这个库。 显示任何图像的方式。 你需要得到它的URI

然后，

在图像组件中（反应）

可以这样展示

<Image source={{uri: YOUR IMAGE URI}}/>

Answer 2

显示图像非常简单，您可以使用 state 来存储图像或上传后的 pdf 详细信息。

要显示图像， <Image source={{uri: imageUrl}}/> // 您存储在 state 中

要显示 pdf，可以使用react-native-view-pdf package，

查看PDF.tsx

import React from 'react';
import {View} from 'react-native';
import Pdf from 'react-native-view-pdf';

export type Props = {
    imageUrl: string,
    imageName: string,
    styles: object
}

const ViewPdf: React.FC<Props> = ({
    imageUrl,
    imageName,
    styles
}) => {
    const source = { uri: imageUrl, cache: true };
    return(
        <View style = {{flex: 1}}>
            <Pdf resource={imageUrl} style={styles} fadeInDuration={100}/>
        </View>
    )
};

export default ViewPdf;

并将其称为：

<ViewPdf 
     imageUrl = {uri} 
     imageName = {fileName} 
     styles = {styles.thumbnail_image}
 />