react native reanimated viewer

React-Native-Reanimated-Viewer

Ein leistungsstarker Bildbetrachter in React-Native, erstellt aus React-Native-Reanimated.

Installieren

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

Anschließend müssen Sie die zusätzlichen Schritte ausführen, um die Installation abzuschließen: React-Native-Reanimated und React-Native-Gesture-Handler.

Beispiel

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

Beachten

Sie müssen Ihre von ImageWrapper verwendeten Bildkomponenten in dieses Paket einschließen.

Requisiten

ImageViewer

Name	erforderlich	Typ	Standard	Beschreibung	Beispiel
Daten	WAHR	{key: string; source: ImageURISource}[]	undefiniert	Die Originalquelle und der Bildschlüssel	[{key: 'image-1', source: {uri:'http://***.***/***.png'}}]
renderCustomComponent	FALSCH	(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElement	undefiniert	Das benutzerdefinierte Element in ImageViewer	({index}) => <Text>current index is {index}</Text>
onLongPress	FALSCH	(_: {item: {key: string; source: ImageURISource}; index: number;}) => void	undefiniert	Sobald Sie den Bildbetrachter lange gedrückt haben, wird die Funktion aktiv	({index}) => console.log(`${index} pressed long`)
imageResizeMode	FALSCH	ImageResizeMode	undefiniert	Die resizeMode-Requisiten des Bildes im Viewer	"contain"
onChange	FALSCH	(currentIndex: number) => void	undefiniert	Wenn der Betrachter mit dem Wischen fertig ist, wird die Funktion aufgerufen	(currentIndex) => console.log(`current index is ${currentIndex}`)
DragUpToCloseEnabled	FALSCH	boolean	undefiniert	Aktivieren Sie das Ziehen nach oben, um den Viewer zu schließen	true
maxScale	FALSCH	number	3	Maximale Bildvergrößerung	3
doubleTapScale	FALSCH	number	2	Die Vergrößerung beim Doppelklicken auf das Bild	2
ShouldCloseViewer	FALSCH	(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean	undefiniert	Steuern Sie, ob der Viewer bei bestimmten Gesten geschlossen werden kann	({gesture}) => gesture === GestureEnum.Tap
originalLayoutOffset	FALSCH	{pageX?: number; pageY?: number}	undefiniert	Das ursprüngliche Bildlayout misst manchmal Fehler. Sie können diese Requisite verwenden, um das Problem zu beheben	{pageY: 100}

ImageWrapper

Name	erforderlich	Typ	Standard	Beschreibung	Beispiel
viewerRef	WAHR	MutableRefObject<ImageViewerRef>	undefiniert	Die Referenz von imageViewer	[{url:'http://***.***/***.png'}]
Index	WAHR	number	undefiniert	Der Index des aktuellen ImageWrapper	({index}) => <Text>current index is {index}</Text>
Quelle	WAHR	ImageURISource	undefiniert	Die URL des Bildes der inneren Komponente	{uri: 'https://***.***/***.png'}
Stil	FALSCH	ViewStyle	undefiniert	Der Stil des Bild-Wrappers	{margin: 10}
onPress	FALSCH	() => boolean or undefined	undefiniert	Sobald Sie auf „Bild“ gedrückt haben, wird die Funktion aktiviert. (Wenn „false“ zurückgegeben wird, wird der Viewer nicht angezeigt.)	() => console.log('pressed')
WrapperProps	FALSCH	ViewProps	undefiniert	Sie können die Container-Requisiten individuell anpassen	{onLongPress: () => console.warn('longPressed')}

TODO

• Bildcache hinzufügen
• Exportieren Sie weitere nützliche Requisiten