react native fast shadow Download - react native fast shadow Source Download

react native fast shadow

ซอร์สโค้ดอื่น ๆ

v0.1.1

ดาวน์โหลด

- React-Native-Fast-Shadow

เงา Android ที่รวดเร็วและคุณภาพสูง สำหรับ React Native

ทำไม

React Native สนับสนุนเงาบน Android ผ่านเสายกระดับ แต่การบรรลุเอฟเฟกต์ที่ต้องการมักเป็นไปไม่ได้เพราะมันมาพร้อมกับที่ตั้งไว้ล่วงหน้าน้อยมากเท่านั้น ห้องสมุดของบุคคลที่สามได้ถูกสร้างขึ้นเพื่อหลีกเลี่ยงสิ่งนี้ แต่เมื่อใช้ในหลายมุมมองพวกเขาสามารถทำให้แอพช้าลงหรือเพิ่มการใช้หน่วยความจำอย่างมีนัยสำคัญ

คุณสมบัติ

? ‍♀ ใช้งานง่าย: การแทนที่แบบดรอปอินสำหรับส่วนประกอบ <View>
⚡ performant: เงาสามารถนำไปใช้กับมุมมองจำนวนมากโดยไม่ส่งผลกระทบต่อประสิทธิภาพที่สำคัญ ได้รับการปรับให้เหมาะสมสำหรับการใช้หน่วยความจำต่ำและการเรนเดอร์อย่างรวดเร็ว
- ปรับแต่งได้: รองรับอุปกรณ์ประกอบฉากเงาปกติ, shadowRadius , shadowColor , shadowOpacity และ shadowOffset
Universal: ทำงานบนแพลตฟอร์มทั้งหมด บน iOS และเว็บ <ShadowedView> เป็นเพียงนามแฝงของ <View>

เริ่มต้นใช้งาน

npm install react-native-fast-shadow
# or
yarn add react-native-fast-shadow

การใช้งาน:

 import { ShadowedView } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { {
    shadowOpacity : 0.4 ,
    shadowRadius : 12 ,
    shadowOffset : {
      width : 5 ,
      height : 3 ,
    } ,
  } }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView >

Shadowstyle ():

ยูทิลิตี้ shadowStyle() ยังสามารถใช้เพื่อให้ง่ายต่อการสร้างสไตล์เงาและเพื่อ ให้เงาแพลตฟอร์มการสะสมที่สอดคล้องกัน มันจะสร้างเสา style เดียวกันกับด้านบน แต่จะแบ่งรัศมีเงาเป็น 2 บน iOS (ด้วยเหตุผลบางอย่างเงา iOS มีขนาดใหญ่เกินไปโดยปัจจัย 2 เมื่อเปรียบเทียบกับเครื่องมือออกแบบหรือกับกล่องของ CSS):

 import { ShadowedView , shadowStyle } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { shadowStyle ( {
    opacity : 0.4 ,
    radius : 12 ,
    offset : [ 5 , 3 ] ,
  } ) }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView >

มันทำงานอย่างไรภายใต้ประทุน

บน Android, Shadow Drawables ถูกสร้างขึ้นด้วยกระบวนการต่อไปนี้ (ดู ShadowFactory.java สำหรับรายละเอียดเพิ่มเติม):

รูปร่างของมุมมอง (สี่เหลี่ยมผืนผ้าที่มีมุมโค้งมน) ถูกทาสีเป็นสีดำบนผืนผ้าใบ
เบลอแบบเกาส์เซียนถูกนำไปใช้กับผืนผ้าใบกับ shadowRadius ที่กำหนดโดยใช้ Renderscript API
จากนั้นจะถูกแปลงเป็น NinepatchDrawable เพื่อให้แน่ใจว่ามุมของเงาจะไม่บิดเบือนเมื่อมีการปรับขนาดมุมมอง ด้วยวิธีนี้เราสามารถสร้างเงาขนาดเล็กที่สามารถดึงได้และ นำกลับมาใช้ใหม่ สำหรับทุกมุมมองด้วยเส้นขอบเดียวกันและรัศมีเบลอ
ในที่สุดสิ่งที่น่าดึงดูดจะแสดงผลด้านหลังเนื้อหามุมมอง: มันถูกย้อมสีด้วย shadowColor / shadowOpacity และชดเชยตาม shadowOffset

วิธีการทำงานของ ninepatchDrawable (สังเกตว่ามุมไม่ถูกต้องเมื่อปรับขนาดได้):

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

React-Native-Fast-Shadow มาพร้อมกับข้อ จำกัด ต่อไปนี้:

มันใช้งานได้กับสี่เหลี่ยมโค้งมน: ซึ่งแตกต่างจากการใช้งาน iOS <View> <ShadowedView> จะไม่ทำงานกับมุมมองแบบอิสระ มันคาดว่ามุมมองของลูกหลานโดยตรงของมันจะเป็นสี่เหลี่ยมผืนผ้าโค้งมน (ถึงวงกลม) โซลูชัน: สำหรับองค์ประกอบ <Text> Shadowed คุณสามารถใช้ TextShadowRadius ได้ สำหรับรูปร่างที่ซับซ้อน React-Native-Androw เป็นตัวเลือกที่ดีที่สุดของคุณ
<dhadowedView> คาดว่ามุมมองลูกจะเติมเต็ม: มันขึ้นอยู่กับคุณเพื่อให้แน่ใจว่า <ShadowedView> และลูก ๆ ของมันมีขนาดเท่ากันมิฉะนั้นเงาจะใหญ่กว่าเนื้อหา (คุณสามารถนึกถึง <ShadowedView> เป็นมุมมอง ด้วยสีพื้นหลัง)
RADII มุมสามารถอนุมานได้อย่างไม่ถูกต้อง: เราใช้สไตล์ของ <ShadowedView> หรือรูปแบบของลูกโดยตรงเพื่ออนุมานรัศมีมุมเพื่อใช้ หากลำดับชั้นมุมมองของคุณมีความซับซ้อนมากขึ้นรัศมีมุมอาจไม่อนุมานได้อย่างถูกต้อง วิธีแก้ปัญหา: ทำใหม่ลำดับชั้นมุมมองของคุณหรือส่งผ่าน borderRadius โดยตรงไปยังรูป style ของ <ShadowedView>
Shadow Radius ถูก จำกัด ไว้ที่ 25 หรือต่ำกว่า: ข้อ จำกัด นี้มาจากเอฟเฟกต์เบลอของ RenderScript วิธีแก้ปัญหา: แจ้งให้เราทราบว่านี่เป็นปัญหาสำหรับคุณหรือไม่ สิ่งนี้อาจเป็นไปได้โดยการลดขนาดบิตแมปเงาก่อนที่จะใช้เอฟเฟกต์เบลอ

เกณฑ์มาตรฐาน

ตารางต่อไปนี้เปรียบเทียบการใช้หน่วยความจำของ react-native-fast-shadow ------------------shadow-2 เมื่อแสดงผล 100 150x200pt <Image> บนพิกเซล 2 พร้อมเงารัศมี 12pt แอพนี้ถูกสร้างขึ้นโดยใช้ตัวแปรดีบั๊กและเฮอร์มีส