react native reanimated viewer

reaccionar-nativo-visor-reanimado

Un visor de imágenes de alto rendimiento en reaccionar-nativo creado a partir de reaccionar-nativo-reanimado.

Instalar

npm install react-native-reanimated-viewer react-native-reanimated react-native-gesture-handler --save
cd ios & pod install

Luego debes seguir los pasos adicionales para finalizar la instalación: reaccionar-nativo-reanimado y reaccionar-nativo-gesto-handler.

Ejemplo

ejemplo.gif

 import React , { memo , useRef , useMemo } from 'react' ;
import { View , Image } from 'react-native' ;
import { ImageWrapper , ImageViewer } from 'react-native-reanimated-viewer' ;
const ImageViewerPage = ( ) => {
  const imageRef = useRef ( null ) ;
  const mockData = useMemo (
    ( ) => [
      {
        smallUrl :
          'https://img2.baidu.com/it/u=1835117106,152654887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556' ,
        url : 'https://img2.baidu.com/it/u=1835117106,152654887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556' ,
      } ,
      {
        smallUrl :
          'https://img1.baidu.com/it/u=139191814,3489949748&fm=253&fmt=auto&app=138&f=JPEG?w=491&h=491' ,
        url : 'https://img1.baidu.com/it/u=139191814,3489949748&fm=253&fmt=auto&app=138&f=JPEG?w=491&h=491' ,
      } ,
      {
        smallUrl :
          'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' ,
        url : 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' ,
      } ,
    ] ,
    [ ] ,
  ) ;
  return (
    < >
      < ImageViewer
        ref = { imageRef }
        data = { mockData . map ( ( el ) => ( { key : `key- ${ el . url } ` , source : { uri : el . url } } ) ) }
      />
      < View style = { { flexDirection : 'row' } } >
        { mockData . map ( ( el , index ) => (
          < ImageWrapper
            key = { el . smallUrl }
            viewerRef = { imageRef }
            index = { index }
            source = { {
              uri : el . smallUrl ,
            } }
          >
            < Image
              source = { {
                uri : el . smallUrl ,
              } }
              style = { { width : 100 , height : 100 } }
            />
          </ ImageWrapper >
        ) ) }
      </ View >
    </ >
  ) ;
} ;
export default memo ( ImageViewerPage ) ; 

Aviso

Debe empaquetar los componentes de su imagen utilizados por ImageWrapper en este paquete.

Accesorios

Visor de imágenes

nombre	requerido	tipo	por defecto	descripción	Ejemplo
datos	verdadero	{key: string; source: ImageURISource}[]	indefinido	La fuente original y la clave de la imagen.	[{key: 'image-1', source: {uri:'http://***.***/***.png'}}]
renderizar componente personalizado	FALSO	(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElement	indefinido	El elemento personalizado en ImageViewer	({index}) => <Text>current index is {index}</Text>
enLongPress	FALSO	(_: {item: {key: string; source: ImageURISource}; index: number;}) => void	indefinido	Una vez que presione el visor de imágenes durante mucho tiempo, la función se activará	({index}) => console.log(`${index} pressed long`)
Modo de cambio de tamaño de imagen	FALSO	ImageResizeMode	indefinido	Los accesorios resizeMode de la imagen en el visor	"contain"
en cambio	FALSO	(currentIndex: number) => void	indefinido	Cuando el espectador termine de deslizar el dedo, se llamará a la función	(currentIndex) => console.log(`current index is ${currentIndex}`)
arrastrarHastaCerrarEnabled	FALSO	boolean	indefinido	Habilite arrastrar hacia arriba para cerrar el visor	true
escala máxima	FALSO	number	3	Ampliación máxima de la imagen	3
dobleTapScale	FALSO	number	2	La ampliación al hacer doble clic en la imagen.	2
deberíaCerrarViewer	FALSO	(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean	indefinido	Controlar si el visor se puede cerrar con ciertos gestos	({gesture}) => gesture === GestureEnum.Tap
originalLayoutOffset	FALSO	{pageX?: number; pageY?: number}	indefinido	El diseño de la imagen original mide errores a veces, puedes usar este accesorio para solucionarlo	{pageY: 100}

Envoltorio de imagen

nombre	requerido	tipo	por defecto	descripción	Ejemplo
visorRef	verdadero	MutableRefObject<ImageViewerRef>	indefinido	La referencia de imageViewer	[{url:'http://***.***/***.png'}]
índice	verdadero	number	indefinido	El índice del ImageWrapper actual.	({index}) => <Text>current index is {index}</Text>
fuente	verdadero	ImageURISource	indefinido	La URL de la imagen del componente interno.	{uri: 'https://***.***/***.png'}
estilo	FALSO	ViewStyle	indefinido	El estilo del contenedor de imágenes.	{margin: 10}
enPrensa	FALSO	() => boolean or undefined	indefinido	Una vez que presione la imagen, la función se activará (si devuelve falso, el visor no la mostrará).	() => console.log('pressed')
envoltorioProps	FALSO	ViewProps	indefinido	Puedes personalizar los accesorios del contenedor.	{onLongPress: () => console.warn('longPressed')}

HACER

• agregar caché de imagen
• exportar accesorios más útiles