react native reanimated viewer

реакция-родной-реанимированный-просмотрщик

Высокопроизводительная программа просмотра изображений в React-Native, созданная на основе React-Native-Reanimated.

Установить

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

Затем вам нужно выполнить дополнительные шаги для завершения установки: реагирование-родной-реанимированный и реагирующий-родной-жест-обработчик.

Пример

пример.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 ) ; 

Уведомление

Вам необходимо обернуть компоненты изображения, используемые ImageWrapper, в этот пакет.

Реквизит

Средство просмотра изображений

имя	необходимый	тип	по умолчанию	описание	Пример
данные	истинный	{key: string; source: ImageURISource}[]	неопределенный	Исходный источник и ключ изображения	[{key: 'image-1', source: {uri:'http://***.***/***.png'}}]
рендерCustomComponent	ЛОЖЬ	(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElement	неопределенный	Пользовательский элемент в ImageViewer	({index}) => <Text>current index is {index}</Text>
onLongPress	ЛОЖЬ	(_: {item: {key: string; source: ImageURISource}; index: number;}) => void	неопределенный	Если вы нажмете кнопку просмотра изображений в течение длительного времени, функция будет активна.	({index}) => console.log(`${index} pressed long`)
Режим изменения размера изображения	ЛОЖЬ	ImageResizeMode	неопределенный	Реквизит resizeMode изображения в средстве просмотра	"contain"
onChange	ЛОЖЬ	(currentIndex: number) => void	неопределенный	Когда зритель завершит пролистывание, будет вызвана функция.	(currentIndex) => console.log(`current index is ${currentIndex}`)
перетащитьUpToCloseEnabled	ЛОЖЬ	boolean	неопределенный	Включите перетаскивание вверх, чтобы закрыть средство просмотра	true
МаксСкейл	ЛОЖЬ	number	3	Максимальное увеличение изображения	3
даблтапскейл	ЛОЖЬ	number	2	Увеличение при двойном щелчке по изображению	2
следуетЗакрытьПросмотрщик	ЛОЖЬ	(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean	неопределенный	Контролируйте, можно ли закрыть средство просмотра определенными жестами.	({gesture}) => gesture === GestureEnum.Tap
оригиналLayoutOffset	ЛОЖЬ	{pageX?: number; pageY?: number}	неопределенный	Исходный макет изображения иногда допускает ошибку, вы можете использовать эту опору, чтобы исправить ее.	{pageY: 100}

ImageWrapper

имя	необходимый	тип	по умолчанию	описание	Пример
зрительСсылка	истинный	MutableRefObject<ImageViewerRef>	неопределенный	Ссылка на imageViewer	[{url:'http://***.***/***.png'}]
индекс	истинный	number	неопределенный	Индекс текущего ImageWrapper	({index}) => <Text>current index is {index}</Text>
источник	истинный	ImageURISource	неопределенный	URL-адрес изображения внутреннего компонента	{uri: 'https://***.***/***.png'}
стиль	ЛОЖЬ	ViewStyle	неопределенный	Стиль оболочки изображения	{margin: 10}
onPress	ЛОЖЬ	() => boolean or undefined	неопределенный	Как только вы нажмете изображение, функция станет активной. (Если она вернет false, средство просмотра не будет отображаться.)	() => console.log('pressed')
оберткаРеквизит	ЛОЖЬ	ViewProps	неопределенный	Вы можете настроить реквизит контейнера	{onLongPress: () => console.warn('longPressed')}

TODO

• добавить кеш изображений
• экспортируйте больше полезных реквизитов