หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

จุกจิก

ส่วนประกอบของภาพพื้นเมืองตอบสนอง


แอปตัวอย่าง FastImage

ส่วนประกอบ Image ของ Native Native จัดการกับการแคชรูปภาพเหมือนเบราว์เซอร์ส่วนใหญ่ หากเซิร์ฟเวอร์กำลังส่งคืนส่วนหัวควบคุมแคชที่เหมาะสมสำหรับรูปภาพโดยทั่วไปคุณจะได้รับการเรียงลำดับของพฤติกรรมการแคชในตัวที่คุณมีในเบราว์เซอร์ แม้แต่คนจำนวนมากก็สังเกตเห็น:

  • กะพริบ
  • แคชพลาด
  • การโหลดประสิทธิภาพต่ำจากแคช
  • ประสิทธิภาพต่ำโดยทั่วไป

FastImage เป็นการแทนที่ Image ที่แก้ปัญหาเหล่านี้ FastImage เป็นเสื้อคลุมรอบ Sdwebimage (iOS) และ Glide (Android)

คุณสมบัติ

  • แคชอิมเมจอย่างจริงจัง
  • เพิ่มส่วนหัวการอนุญาต
  • จัดลำดับความสำคัญของภาพ
  • ภาพล่วงหน้า
  • สนับสนุน GIF
  • รัศมีเส้นขอบ

การใช้งาน

หมายเหตุ: คุณต้องใช้ React Native 0.60.0 หรือสูงกว่าเพื่อใช้ react-native-fast-image เวอร์ชันล่าสุด 

yarn add react-native-fast-image
cd ios && pod install
 import FastImage from 'react-native-fast-image'

const YourImage = ( ) => (
    < FastImage
        style = { { width : 200 , height : 200 } }
        source = { {
            uri : 'https://unsplash.it/400/400?image=1' ,
            headers : { Authorization : 'someAuthToken' } ,
            priority : FastImage . priority . normal ,
        } }
        resizeMode = { FastImage . resizeMode . contain }
    />
)

คุณใช้ Glide โดยใช้ AppGlideModule อยู่แล้วหรือไม่?

  • คุณใช้ Glide โดยใช้ AppGlideModule อยู่แล้วหรือไม่? (คุณอาจมีปัญหาหากคุณไม่ได้อ่านสิ่งนี้)

คุณใช้ Proguard หรือไม่?

หากคุณใช้ proguard คุณจะต้องเพิ่มบรรทัดเหล่านี้ลงใน android/app/proguard-rules.pro : 

 -keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

คุณสมบัติ

source?: object

แหล่งที่มาสำหรับภาพระยะไกลเพื่อโหลด

source.uri?: string

URL ระยะไกลเพื่อโหลดภาพจาก เช่น 'https://facebook.github.io/react/img/logo_og.png'

source.headers?: object

ส่วนหัวเพื่อโหลดภาพด้วย เช่น { Authorization: 'someAuthToken' }

source.priority?: enum

  • FastImage.priority.low - ลำดับความสำคัญต่ำ
  • FastImage.priority.normal (ค่าเริ่มต้น) - ลำดับความสำคัญปกติ
  • FastImage.priority.high - ลำดับความสำคัญสูง

source.cache?: enum

  • FastImage.cacheControl.immutable - (ค่าเริ่มต้น) - อัปเดตเฉพาะเมื่อ URL เปลี่ยนไป
  • FastImage.cacheControl.web - ใช้ส่วนหัวและปฏิบัติตามขั้นตอนการแคชปกติ
  • FastImage.cacheControl.cacheOnly - แสดงภาพจากแคชเท่านั้นอย่าทำการร้องขอเครือข่ายใด ๆ

defaultSource?: number

  • สินทรัพย์ที่เต็มไปด้วย require(...)
  • โปรดทราบว่าเช่นเดียวกับการใช้งาน Image ในตัวบน Android defaultSource ไม่ทำงานในโหมดดีบัก นี่เป็นเพราะความจริงที่ว่าสินทรัพย์ถูกส่งจากเซิร์ฟเวอร์ dev แต่ฟังก์ชั่นของ RN เท่านั้นที่รู้วิธีโหลดจาก res

resizeMode?: enum

  • FastImage.resizeMode.contain - ปรับขนาดภาพอย่างสม่ำเสมอ (รักษาอัตราส่วนภาพของภาพ) เพื่อให้ทั้งมิติ (ความกว้างและความสูง) ของภาพจะเท่ากับหรือน้อยกว่ามิติที่สอดคล้องกันของมุมมอง
  • FastImage.resizeMode.cover (ค่าเริ่มต้น) - ปรับขนาดภาพอย่างสม่ำเสมอ (รักษาอัตราส่วนภาพของภาพ) เพื่อให้ทั้งมิติ (ความกว้างและความสูง) ของภาพจะเท่ากับหรือมากกว่ามิติที่สอดคล้องกันของมุมมอง
  • FastImage.resizeMode.stretch - ความกว้างของมาตราส่วนและความสูงอย่างอิสระซึ่งอาจเปลี่ยนอัตราส่วนภาพของ SRC
  • FastImage.resizeMode.center - อย่าปรับขนาดภาพให้อยู่ตรงกลาง

onLoadStart?: () => void

เรียกว่าเมื่อภาพเริ่มโหลด

onProgress?: (event) => void

เรียกว่าเมื่อภาพกำลังโหลด

เช่น onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}

onLoad?: (event) => void

เรียกว่าการดึงภาพที่ประสบความสำเร็จ เรียกด้วยความกว้างและความสูงของภาพที่โหลด

เช่น onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}

onError?: () => void

เรียกว่าข้อผิดพลาดในการดึงภาพ

onLoadEnd?: () => void

เรียกว่าเมื่อภาพเสร็จสิ้นการโหลดไม่ว่าจะสำเร็จหรือผิดพลาด

style

สไตล์พื้นเมืองที่ตอบสนอง รองรับการใช้ borderRadius

fallback: boolean

ถ้าจริงจะย้อนกลับไปใช้ Image ในกรณีนี้ภาพจะยังคงมีสไตล์และวางแบบเดียวกับ FastImage

tintColor?: number | string

หากให้มาให้เปลี่ยนสีของพิกเซลที่ไม่โปร่งใสทั้งหมดเป็นสีที่กำหนด

วิธีการคงที่

FastImage.preload: (source[]) => void

PRELOAD รูปภาพเพื่อแสดงในภายหลัง เช่น 

 FastImage . preload ( [
    {
        uri : 'https://facebook.github.io/react/img/logo_og.png' ,
        headers : { Authorization : 'someAuthToken' } ,
    } ,
    {
        uri : 'https://facebook.github.io/react/img/logo_og.png' ,
        headers : { Authorization : 'someAuthToken' } ,
    } ,
] )

FastImage.clearMemoryCache: () => Promise<void>

ล้างรูปภาพทั้งหมดจากแคชหน่วยความจำ

FastImage.clearDiskCache: () => Promise<void>

ล้างภาพทั้งหมดจากแคชดิสก์

การแก้ไขปัญหา

หากคุณมีปัญหาใด ๆ ที่ใช้ห้องสมุดนี้ลองทำตามขั้นตอนในการแก้ไขปัญหาและดูว่าพวกเขาแก้ไขหรือไม่

การพัฒนา

ทำตามคำแนะนำเหล่านี้เพื่อให้แอปตัวอย่างกำลังทำงานอยู่

รองรับ React Native Versions

โครงการนี้มีวัตถุประสงค์เพื่อสนับสนุน React Native เวอร์ชันล่าสุด
สิ่งนี้ทำให้การพัฒนาและการทดสอบโครงการง่ายขึ้น

หากคุณต้องการคุณสมบัติใหม่หรือการแก้ไขข้อบกพร่องสำหรับรุ่นเก่าคุณสามารถแยกโครงการนี้ได้

การให้เครดิต

แนวคิดสำหรับโมดูลนี้มาจากแพ็คเกจ React-Native-Web-Image ของ Vovkasm นอกจากนี้ยังใช้ร่อนและ sdwebimage แต่ไม่มีคุณสมบัติบางอย่างที่ฉันต้องการ (ลำดับความสำคัญส่วนหัว)

ขอบคุณ @mobinni ที่ช่วยในการกำหนดแนวความคิด

ใบอนุญาต

  • FastImage - MIT © Dylanvann
  • sdwebimage - MIT
  • Glide - BSD ส่วน MIT และ Apache 2.0 ดูไฟล์ใบอนุญาตสำหรับรายละเอียด
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด