react native shadow 2
v7.1.1
重要
2024年10月23日にリリースされたNew React Native 0.76は、ついにクロスプラットフォームの影をサポートします！
この新しい機能は、このライブラリよりも優先される必要があります。
過去4年近くにわたってみんなのサポートと優しさを心から感謝し、週に39Kと2mのダウンロードに達したことを祝うことができますか？
TypeScript、React、React Nativeの5年間の専門知識を持つ情熱的な専門家を探している場合は、[email protected]で私に連絡してください！
React-Native-Shadowは何年も死んでいます。これは、より多くの機能、タイプスクリプトのサポート、ゼロから書かれた改良されたバージョンです。サイズを定義する必要はありません。影は最初のレンダリングにスマートに適用され、次のレンダリングに正確に再適用されます。
Android、iOS、およびWebで同じ影の外観と使用法がないという古いReactネイティブの問題を解決します。
EtherCreative/React-Native-Shadow-GeneratorのWebサイトは、ここで説明した理由により、2つのプラットフォーム間で非常に同様の結果をもたらすことはありません。また、このライブラリほどカスタマイズ可能ではありません。
Android、iOS、およびWebと互換性があります。そしてエキスポ！
RTLをサポートします。
このライブラリに簡単に試してみてください！
expoを使用する場合を含め、最新の
react-native-svgバージョンが推奨されます。
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' |
| エンドカラー | 影の最終勾配色。 | string | 透明なStartColor。説明。 |
| 距離 | 影がどこまで進むか。 | number | 10 |
| オフセット | 影を動かします。ネガティブxは左/開始、ネガティブyそれを動かします。'x%'値を受け入れます。これを定義すると、通常の望ましい動作であるため、デフォルトペイント paintInside真実になります。 | [x: string | number, y: string | number] | [0, 0] |
| ペイントインサイド | コンテンツの下/内部に影を適用します。 startColor 、勾配なしで充填色として使用されます。offsetを使用する場合、またはお子様がある程度の透明性を持っている場合に役立ちます。 | boolean | falseですが、 offsetが定義されている場合はtrue |
| 側面 | 影が描かれている側面。コーナーは含まれていません。未定義の側面のフォールバック。説明。 | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| コーナー | 影が描かれているコーナー。未定義のコーナーのフォールバック。説明。 | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| スタイル | あなたの子供を包むビューのスタイル。以下のメモを読んでください。 | StyleProp<ViewStyle> | undefined |
| ContainerSyle | 影とあなたの子供たちを包むビューのスタイル。マージンに役立ちます。 | StyleProp<ViewStyle> | undefined |
| ストレッチ | あなたの子供をすべて利用可能な水平スペースすべてにします。説明。 | boolean | false |
| より安全な | 1回目のレンダリングでは相対的なサイジングとポジショニングを使用しませんが、正確なOnlayoutサイズで次のレンダリングで使用しません。第1レンダリングの視覚的アーティファクトを避けるために、側面のサイズ（円のような）よりも大きい半径を扱う場合に便利です。true場合、1番目のレンダリングには影が表示されません。 | boolean | false |
| 無効 | 影を無効にします。影が望まれない場合があるため、コンポーネントを簡単に再利用するのに便利です。containerStyleとstyleまだ適用されています。 | boolean | false |
影に一人の子供がいる場合、定義されている場合、子供のstyleプロパティからwidth 、 height 、およびすべてのborderRadius特性が得られます。
また、これらのプロパティを影のstyleで定義することもできます。ここで定義されたプロパティは、子供のstyleで定義されているものよりも優先されます。
それらのいずれかでwidthとheight定義されている場合、最初の自動サイジングは発生しないため、単一のレンダリングのみがあります。正確なレンダリングのみが行われます。
'borderTopLeftRadius'または'borderTopStartRadius'いずれかを使用して、角の半径を定義するためにバリエーションを使用できますが、後者はRTL標準であることをお勧めします。
サイズが定義されていない場合、その側よりも半径が大きいと影が台無しになります。 safeRenderプロパティを使用して、正確なコンポーネントサイズがあり、半径が適切に制限されている場合、2番目のレンダリング以降の影のみを表示できます。
2000年を超えるラジエ（Tailwindのrounded-fullは9999）がAndroidをクラッシュさせる可能性があります。
不透明度は、AlphaチャネルのstartColorおよびendColorプロパティに直接設定されます。例： '#0001'はほとんど透明な黒です。また、 '#rrggbbaa' 、 'rgba()' 、 'hsla()'などを使用することもできます。
stretchプロパティまたはstyle={{alignSelf: 'stretch'}}影コンポーネントに使用します。説明！
ShadowPropsタイプ、Shadow Componentの小道具をエクスポートしました。次のことを行うことができます。
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offsetとsizeプロパティは、タイプスクリプトエラーをスローしています！TypeScriptを少なくとも4.0.0にアップグレードしてください！これらの2つのプロパティは、ラベルのあるタプルを使用しています。 TypeScriptを使用しない場合、これは起こりません。
