react native reanimated viewerビューアダウンロード - react native reanimated viewerソースコードのダウンロード

react native reanimated viewer

AI ソースコード

1.4.1

ダウンロード

反応ネイティブ蘇生ビューア

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'}}]`
renderCustomComponent	間違い	`(_: {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"`
onChange	間違い	`(currentIndex: number) => void`	未定義	ビューアがスワイプを終了すると、関数が呼び出されます	(currentIndex) => console.log(`current index is ${currentIndex}`)
ドラッグアップトゥクローズ有効	間違い	`boolean`	未定義	ビューアを閉じるために上にドラッグできるようにします	`true`
マックススケール	間違い	`number`	3	画像最大倍率	`3`
ダブルタップスケール	間違い	`number`	2	画像をダブルクリックした時の倍率	`2`
shouldCloseViewer	間違い	`(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean`	未定義	特定のジェスチャでビューアを閉じることができるかどうかを制御します	`({gesture}) => gesture === GestureEnum.Tap`
オリジナルレイアウトオフセット	間違い	`{pageX?: number; pageY?: number}`	未定義	元の画像レイアウトではエラーが発生する場合があります。この小道具を使用して修正できます。	`{pageY: 100}`

イメージラッパー

名前	必須	タイプ	デフォルト	説明	例
ビューア参照	真実	`MutableRefObject<ImageViewerRef>`	未定義	imageViewerのリファレンス	`[{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')}`