react native reanimated viewer

ตอบสนองพื้นเมืองคืนชีพผู้ชม

โปรแกรมดูรูปภาพประสิทธิภาพสูงในรูปแบบรีแอคทีฟที่สร้างขึ้นจากรีแอคทีฟแบบเนทีฟ

ติดตั้ง

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

ตัวอย่าง

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>
บนLongPress	เท็จ	(_: {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}`)
ลากUpToCloseเปิดใช้งานแล้ว	เท็จ	boolean	ไม่ได้กำหนด	เปิดใช้งานการลากขึ้นเพื่อปิดตัวแสดง	true
แม็กซ์สเกล	เท็จ	number	3	กำลังขยายสูงสุดของภาพ	3
doubleTapScale	เท็จ	number	2	กำลังขยายเมื่อดับเบิลคลิกที่ภาพ	2
ควรปิด Viewer	เท็จ	(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean	ไม่ได้กำหนด	ควบคุมว่าสามารถปิดผู้ชมด้วยท่าทางบางอย่างได้หรือไม่	({gesture}) => gesture === GestureEnum.Tap
เค้าโครงดั้งเดิมOffset	เท็จ	{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	ไม่ได้กำหนด	รูปแบบของ wrapper รูปภาพ	{margin: 10}
บนกด	เท็จ	() => boolean or undefined	ไม่ได้กำหนด	เมื่อคุณกดรูปภาพ ฟังก์ชั่นนี้จะเปิดใช้งาน (หากคืนค่าเป็นเท็จ โปรแกรมดูจะไม่แสดง)	() => console.log('pressed')
กระดาษห่ออุปกรณ์ประกอบฉาก	เท็จ	ViewProps	ไม่ได้กำหนด	คุณสามารถปรับแต่งอุปกรณ์ประกอบฉากคอนเทนเนอร์ได้	{onLongPress: () => console.warn('longPressed')}

สิ่งที่ต้องทำ

• เพิ่มแคชรูปภาพ
• ส่งออกอุปกรณ์ประกอบฉากที่มีประโยชน์มากขึ้น