Estoy trabajando en una aplicación en la que hay un botón de carga a través del cual el usuario puede seleccionar un archivo para enviarlo al servidor. Pero antes de enviar el archivo, me gustaría mostrar una vista previa del archivo debajo del botón de carga. ¿Cómo se puede implementar eso? No quiero obtener una vista previa por separado. Debería estar visible debajo del botón de carga dentro de un componente nativo de reacción.
Supongo que está utilizando este paquete 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' />Incluso si no está utilizando esta biblioteca. La manera de mostrar cualquier imagen. Necesitas obtener su URI
Después,
En componente de imagen (reaccionar)
Puedes mostrarlo así,
<Image source={{uri: YOUR IMAGE URI}}/>Para mostrar una imagen es bastante simple, puede tener un estado para almacenar la imagen o los detalles del pdf una vez que la haya cargado.
Para mostrar la imagen, <Image source={{uri: imageUrl}}/> // que almacenó en el estado
Para mostrar un pdf, puede usar el paquete react-native-view-pdf ,
VerPdf.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;y llamarlo como:
<ViewPdf imageUrl = {uri} imageName = {fileName} styles = {styles.thumbnail_image} />