react native reanimated viewer

visualizador react-nativo-reanimado

Um visualizador de imagens de alto desempenho em react-native criado a partir de react-native-reanimated.

Instalar

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

Então você precisa seguir as etapas extras para finalizar a instalação: react-native-reanimated & react-native-gesture-handler.

Exemplo

exemplo.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 ) ; 

Perceber

Você precisa agrupar os componentes de imagem usados ​​pelo ImageWrapper neste pacote.

Adereços

Visualizador de imagens

nome	obrigatório	tipo	padrão	descrição	Exemplo
dados	verdadeiro	{key: string; source: ImageURISource}[]	indefinido	A fonte original e chave da imagem	[{key: 'image-1', source: {uri:'http://***.***/***.png'}}]
renderCustomComponent	falso	(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElement	indefinido	O elemento personalizado no ImageViewer	({index}) => <Text>current index is {index}</Text>
onLongPress	falso	(_: {item: {key: string; source: ImageURISource}; index: number;}) => void	indefinido	Depois de pressionar o visualizador de imagens por um longo tempo, a função será ativada	({index}) => console.log(`${index} pressed long`)
imagemResizeMode	falso	ImageResizeMode	indefinido	Os adereços resizeMode da imagem no visualizador	"contain"
onChange	falso	(currentIndex: number) => void	indefinido	Quando o visualizador terminar de deslizar, a função será chamada	(currentIndex) => console.log(`current index is ${currentIndex}`)
arrastarUpToCloseEnabled	falso	boolean	indefinido	Ative arrastar para cima para fechar o visualizador	true
escalamáx	falso	number	3	Ampliação máxima da imagem	3
escala duplaTapScale	falso	number	2	A ampliação ao clicar duas vezes na imagem	2
deveriaCloseViewer	falso	(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean	indefinido	Controlar se o visualizador pode ser fechado sob determinados gestos	({gesture}) => gesture === GestureEnum.Tap
originalLayoutOffset	falso	{pageX?: number; pageY?: number}	indefinido	O layout da imagem original mede erros às vezes, você pode usar este suporte para corrigi-lo	{pageY: 100}

Image Wrapper

nome	obrigatório	tipo	padrão	descrição	Exemplo
visualizadorRef	verdadeiro	MutableRefObject<ImageViewerRef>	indefinido	A referência do imageViewer	[{url:'http://***.***/***.png'}]
índice	verdadeiro	number	indefinido	O índice do ImageWrapper atual	({index}) => <Text>current index is {index}</Text>
fonte	verdadeiro	ImageURISource	indefinido	O URL da imagem do componente interno	{uri: 'https://***.***/***.png'}
estilo	falso	ViewStyle	indefinido	O estilo do wrapper de imagem	{margin: 10}
onPress	falso	() => boolean or undefined	indefinido	Depois de pressionar a imagem, a função será ativada. (Se retornar falso, o visualizador não será exibido.)	() => console.log('pressed')
wrapperProps	falso	ViewProps	indefinido	Você pode personalizar os adereços do contêiner	{onLongPress: () => console.warn('longPressed')}

PENDÊNCIA

• adicionar cache de imagem
• exportar adereços mais úteis