react native reanimated viewer下载 - react native reanimated viewer源代码下载

react native reanimated viewer

Ai源码

1.4.1

下载

反应本机复活查看器

由react-native-reanimated创建的react-native高性能图像查看器。

安装

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

然后，您需要按照额外的步骤完成安装：react-native-reanimated 和react-native-gesture-handler。

例子

示例.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'}}]`
渲染自定义组件	错误的	`(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElement`	不明确的	ImageViewer 中的自定义元素	`({index}) => <Text>current index is {index}</Text>`
长按时	错误的	`(_: {item: {key: string; source: ImageURISource}; index: number;}) => void`	不明确的	一旦长按图像查看器，该功能就会激活	({index}) => console.log(`${index} pressed long`)
图像调整大小模式	错误的	`ImageResizeMode`	不明确的	查看器中图像的 resizeMode 属性	`"contain"`
改变时	错误的	`(currentIndex: number) => void`	不明确的	当查看器完成滑动时，将调用该函数	(currentIndex) => console.log(`current index is ${currentIndex}`)
向上拖动关闭启用	错误的	`boolean`	不明确的	启用向上拖动以关闭查看器	`true`
最大尺度	错误的	`number`	3	图像最大放大倍数	`3`
双击刻度	错误的	`number`	2	双击图像时的放大倍数	`2`
应该关闭查看器	错误的	`(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean`	不明确的	控制查看器是否可以在某些手势下关闭	`({gesture}) => gesture === GestureEnum.Tap`
原始布局偏移量	错误的	`{pageX?: number; pageY?: number}`	不明确的	原始图像布局测量有时会出现错误，您可以使用此道具来修复它	`{pageY: 100}`

图像包装器

姓名	必需的	类型	默认	描述	例子
查看器参考	真的	`MutableRefObject<ImageViewerRef>`	不明确的	imageViewer的ref	`[{url:'http://*./**.png'}]`
指数	真的	`number`	不明确的	当前ImageWrapper的索引	`({index}) => <Text>current index is {index}</Text>`
来源	真的	`ImageURISource`	不明确的	内部组件图片的url	`{uri: 'https://*./**.png'}`
风格	错误的	`ViewStyle`	不明确的	图像包装器的样式	`{margin: 10}`
新闻报道	错误的	`() => boolean or undefined`	不明确的	一旦按下图像，该功能就会激活。（如果返回 false，则不会显示查看器。）	`() => console.log('pressed')`
包装器道具	错误的	`ViewProps`	不明确的	您可以自定义容器道具	`{onLongPress: () => console.warn('longPressed')}`