react native shadow 2
v7.1.1
สำคัญ
React Native 0.76 ที่เปิดตัวเมื่อ วันที่ 23 ต.ค. 2567 ในที่สุดก็รองรับเงาข้ามแพลตฟอร์ม!
คุณสมบัติใหม่นี้ควรเป็นที่ต้องการมากกว่าห้องสมุดนี้
ฉันสามารถชื่นชมการสนับสนุนและความเมตตาของทุกคนได้อย่างสุดซึ้งในช่วงเกือบ 4 ปีที่ผ่านมาและเฉลิมฉลองการดาวน์โหลดทั้งหมด 39K สัปดาห์และ 2 ม. ?
หากคุณกำลังมองหามืออาชีพที่กระตือรือร้นด้วยความเชี่ยวชาญ 5 ปีในการพิมพ์, ตอบสนองและตอบสนองพื้นเมืองติดต่อฉันที่ [email protected]!
React-Native-Shadow ตายไปหลายปีแล้ว นี่เป็นเวอร์ชันที่ได้รับการปรับปรุงด้วยฟังก์ชันการใช้งานการสนับสนุน typescript และเขียนตั้งแต่เริ่มต้น ไม่จำเป็นต้องกำหนดขนาดของมัน: เงาถูกนำไปใช้อย่างชาญฉลาดในการเรนเดอร์ครั้งแรกแล้วนำมาใช้ใหม่อย่างแม่นยำในสิ่งต่อไปนี้
มันแก้ปัญหาดั้งเดิมของ React Native ที่ไม่มีเงาปรากฏและการใช้งานสำหรับ Android, iOS และเว็บ
เว็บไซต์ EtherCreative/React-Native-Shadow-Generator จะไม่ให้ผลลัพธ์ที่คล้ายกันมากระหว่างสองแพลตฟอร์มด้วยเหตุผลที่ฉันอธิบายไว้ที่นี่ นอกจากนี้ยังไม่สามารถปรับแต่งได้เหมือนห้องสมุดนี้
เข้ากันได้กับ Android, iOS และเว็บ และงานแสดงสินค้า!
รองรับ RTL
ลองใช้ห้องสมุดนี้อย่างรวดเร็ว!
แนะนำให้ใช้เวอร์ชัน
react-native-svgล่าสุดรวมถึงหากใช้ Expo
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2 import { Shadow } from 'react-native-shadow-2' ;
< Shadow >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ Shadow > 
< Shadow distance = { 15 } startColor = { '#eb9066d8' } endColor = { '#ff00ff10' } offset = { [ 3 , 4 ] } >
< View style = { { borderTopStartRadius : 24 , borderBottomEndRadius : 0 , borderRadius : 10 , backgroundColor : '#c454f0dd' } } >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ View >
</ Shadow > 
| คุณสมบัติ | คำอธิบาย | พิมพ์ | ค่าเริ่มต้น |
|---|---|---|---|
| startColor | สีไล่ระดับสีเริ่มต้นของเงา | string | '#00000020' |
| endcolor | สีไล่ระดับสีสุดท้ายของเงา | string | โปร่งใส startColor คำอธิบาย. |
| ระยะทาง | เงาไปไกลแค่ไหน | number | 10 |
| ชดเชย | ย้ายเงา ลบ x ขยับไปทางซ้าย/เริ่มต้น y ลบมันขึ้นยอมรับค่า 'x%'การกำหนดสิ่งนี้จะเริ่มต้น paintInside เป็น จริง เนื่องจากเป็นพฤติกรรมที่ต้องการตามปกติ | [x: string | number, y: string | number] | [0, 0] |
| Paintinside | ใช้เงาด้านล่าง/ภายในเนื้อหา startColor ใช้เป็นสีเติมโดยไม่มีการไล่ระดับสีมีประโยชน์เมื่อใช้ offset หรือถ้าลูกของคุณมีความโปร่งใส | boolean | false แต่ true ถ้ามีการกำหนด offset |
| ด้านข้าง | ด้านที่จะมีเงาของพวกเขา ไม่รวมมุม ด้านที่ไม่ได้กำหนดกลับมาเป็น จริง คำอธิบาย. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| มุม | มุมที่จะมีเงาของพวกเขา มุมที่ไม่ได้กำหนดกลับมาเป็น จริง คำอธิบาย. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| สไตล์ | สไตล์ของมุมมองที่ห่อหุ้มลูก ๆ ของคุณ อ่านบันทึกด้านล่าง | StyleProp<ViewStyle> | undefined |
| ภาชนะบรรจุ | สไตล์ของมุมมองที่ห่อหุ้มเงาและลูก ๆ ของคุณ มีประโยชน์สำหรับระยะขอบ | StyleProp<ViewStyle> | undefined |
| ยืด | ทำให้ลูก ๆ ของคุณ ocuppy พื้นที่แนวนอนที่มีอยู่ทั้งหมด คำอธิบาย. | boolean | false |
| ปลอดภัย | จะไม่ใช้การปรับขนาดสัมพัทธ์และการวางตำแหน่งในการเรนเดอร์ที่ 1 แต่ในการแสดงผลต่อไปนี้ด้วยขนาด onlayout ที่แน่นอน มีประโยชน์หากจัดการกับรัศมีมากกว่าขนาดด้านข้าง (เช่นวงกลม) เพื่อหลีกเลี่ยงสิ่งประดิษฐ์ภาพในการเรนเดอร์ครั้งที่ 1 ถ้า true เงาจะไม่ปรากฏในการเรนเดอร์ครั้งที่ 1 | boolean | false |
| พิการ | ปิดใช้งานเงา มีประโยชน์สำหรับการนำกลับมาใช้ใหม่อย่างง่ายดายเนื่องจากบางครั้งเงาไม่ต้องการcontainerStyle และ style ยังคงถูกนำไปใช้ | boolean | false |
หากเงามีลูกคนเดียวมันจะได้รับ width height และคุณสมบัติ borderRadius ทั้งหมดจากคุณสมบัติ style เด็กหากกำหนด
คุณอาจกำหนดคุณสมบัติเหล่านั้นใน style ของเงา คุณสมบัติที่กำหนดไว้ที่นี่จะมีความสำคัญมากกว่าที่กำหนดไว้ใน style ของเด็ก
หาก width และ height ถูกกำหนดไว้ในใด ๆ จะมีการเรนเดอร์เพียงครั้งเดียวเนื่องจากการปรับขนาดอัตโนมัติครั้งแรกจะไม่เกิดขึ้นเฉพาะการเรนเดอร์ที่แม่นยำเท่านั้น
คุณสามารถใช้ 'borderTopLeftRadius' หรือ 'borderTopStartRadius' และรูปแบบของพวกเขาเพื่อกำหนดรัศมีมุมแม้ว่าฉันจะแนะนำหลังเนื่องจากเป็นมาตรฐาน RTL
การมีรัศมีมากกว่าด้านข้างของมันจะทำให้เงายุ่งเหยิงหากไม่ได้กำหนดขนาด คุณสามารถใช้คุณสมบัติ safeRender เพื่อแสดงเงาในการเรนเดอร์ครั้งที่ 2 และต่อ ๆ ไปเมื่อเรามีขนาดส่วนประกอบที่แน่นอนและรัศมีมี จำกัด อย่างเหมาะสม
รัศมีมากกว่า 2000 ( rounded-full ของ Tailwind คือ 9999) อาจขัดข้อง Android
ความทึบถูกตั้งค่าโดยตรงในคุณสมบัติ startColor และ endColor ในช่องอัลฟ่า เช่น: '#0001' เป็นสีดำที่โปร่งใสเกือบ นอกจากนี้คุณยังสามารถใช้ '#rrggbbaa' , 'rgba()' , 'hsla()' ฯลฯ รูปแบบทั้งหมดในลิงค์นี้ แต่ไม่ใช่สี int
ใช้คุณสมบัติ stretch หรือ style={{alignSelf: 'stretch'}} ในส่วนประกอบเงาของคุณ คำอธิบาย!
มันส่งออกประเภท ShadowProps ซึ่งเป็นอุปกรณ์ประกอบฉากของส่วนประกอบเงา คุณสามารถทำสิ่งต่อไปนี้:
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset และ size คือการขว้างข้อผิดพลาด typescript!อัพเกรด typescript ของคุณอย่างน้อย 4.0.0! คุณสมบัติทั้งสองนั้นใช้ tuples ที่มีป้ายกำกับ หากคุณไม่ใช้ typeScript สิ่งนี้จะไม่เกิดขึ้น
