react native reanimated viewer

رد فعل المشاهد الأصلي

عارض صور عالي الأداء في رد الفعل الأصلي الذي تم إنشاؤه من إعادة إحياء التفاعل الأصلي.

ثَبَّتَ

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

ثم تحتاج إلى اتباع الخطوات الإضافية لإنهاء التثبيت: معالج الإيماءات التفاعلية الأصلية والتفاعل الأصلي.

مثال

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

يلاحظ

تحتاج إلى تغليف مكونات الصورة التي يستخدمها 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>
onLongPress	خطأ شنيع	(_: {item: {key: string; source: ImageURISource}; index: number;}) => void	غير محدد	بمجرد الضغط على عارض الصور لفترة طويلة، سيتم تنشيط الوظيفة	({index}) => console.log(`${index} pressed long`)
imageResizeMode	خطأ شنيع	ImageResizeMode	غير محدد	الدعائم resizeMode للصورة في العارض	"contain"
onChange	خطأ شنيع	(currentIndex: number) => void	غير محدد	عندما ينتهي العارض من التمرير، سيتم استدعاء الوظيفة	(currentIndex) => console.log(`current index is ${currentIndex}`)
DragUpToCloseEnabled	خطأ شنيع	boolean	غير محدد	تمكين السحب لأعلى لإغلاق العارض	true
maxScale	خطأ شنيع	number	3	الصورة الحد الأقصى للتكبير	3
doubleTapScale	خطأ شنيع	number	2	التكبير عند النقر المزدوج على الصورة	2
يجب أن يكون CloseViewer	خطأ شنيع	(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean	غير محدد	التحكم في إمكانية إغلاق العارض تحت إيماءات معينة	({gesture}) => gesture === GestureEnum.Tap
originalLayoutOffset	خطأ شنيع	{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}
على الصحافة	خطأ شنيع	() => boolean or undefined	غير محدد	بمجرد الضغط على الصورة، سيتم تنشيط الوظيفة. (إذا أعادت خطأ، فلن يظهر العارض.)	() => console.log('pressed')
WrapperProps	خطأ شنيع	ViewProps	غير محدد	يمكنك تخصيص الدعائم الحاوية	{onLongPress: () => console.warn('longPressed')}

المهام

• إضافة ذاكرة التخزين المؤقت للصورة
• تصدير المزيد من الدعائم المفيدة