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`	不明確的	一旦按下圖像，該功能就會啟動。	`() => console.log('pressed')`
包裝器道具	錯誤的	`ViewProps`	不明確的	您可以自訂容器道具	`{onLongPress: () => console.warn('longPressed')}`