react native fast shadowダウンロード - react native fast shadowコードのダウンロード

react native fast shadow

その他のソースコード

v0.1.1

ダウンロード

？ React-Native-Fast-Shadow

反応ネイティブの高速で高品質のアンドロイドシャドウ

なぜ

React Nativeは、Elevation Propを介してAndroidの影のみをサポートしますが、プリセットが非常に少ないため、望ましい効果を達成することは不可能です。これを回避するためにサードパーティライブラリが作成されていますが、多くのビューで使用すると、アプリを遅くするか、メモリ消費を大幅に増加させることができます。

特徴

？ <View>
pooferant：シャドウは、大きなパフォーマンスの影響なしに多数のビューに適用できます。低メモリ消費と高速レンダリングのために最適化されています
？カスタマイズ可能：すべての通常のシャドウプロップ、 shadowRadius 、 shadowColor 、 shadowOpacity 、 shadowOffsetをサポートします
ユニバーサル：すべてのプラットフォームで動作します。 iOSとWebで、 <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小道具を作成しますが、iOSでシャドウ半径を2で分割します（何らかの理由で、iOSシャドウは設計ツールまたはCSSのボックスシャドウと比較して2倍大きすぎます）：

 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を参照してください）：

ビューの形（丸い角が付いた長方形）は、キャンバスに黒で塗られています
Gaussian Blurは、RenderScriptAPIを使用して、与えられたshadowRadiusを使用してキャンバスに適用されます
描画可能は、ビューがサイズ変更されたときに影の角が歪んでいないことを保証するために、ninepatchDrawableに変換されます。このようにして、描画可能な小さな影のみを生成し、同じ境界線とぼやけの半径ですべてのビューに対して再利用できます。
最後に、描画可能はビューコンテンツの背後にレンダリングされます： shadowColor / shadowOpacityが染色され、 shadowOffsetに従ってオフセットされています

NinePatchDrawableがどのように機能するか（ドローブルがサイズ変更されたときにコーナーが角になっていないことに注意してください）：

トラブルシューティング

React-Native-Fast-Shadowには次のような制限があります。

丸みを帯びた長方形でのみ動作します。iOS <View>実装とは異なり、 <ShadowedView>フリーフォームビューで動作しません。その直接的な子孫ビューは、丸い長方形（円まで）であると予想しています。ソリューション： Shadowed <Text>要素の場合、TextShadowradiusを使用できます。複雑な形状の場合、React-Native-Androwが最良の選択肢です。
<ShadowedView>子どもの眺めがそれを満たすことを期待しています。 <ShadowedView>とその子供が同じサイズであることを確認するのはあなた次第です。そうしないと、影はコンテンツよりも大きくなります（ <ShadowedView>ビューと考えることができます背景色）。
コーナー半径は間違って推測できます。 <ShadowedView>のスタイルまたは直接の子供のスタイルを使用して、適用するコーナー半径を推測します。ビューの階層がより複雑な場合、コーナーラジアは正しく推測されない場合があります。解決策：ビューの階層を作り直すか、 borderRadius <ShadowedView>のstyle小道具に直接渡します。
シャドウ半径は25以下に制限されています。この制限は、RenderScriptのぼかし効果から生じます。解決策：これがあなたにとって問題であるかどうかを教えてください。これは、おそらく、ぼかし効果を適用する前にシャドウビットマップをダウンスケーリングすることで回避できます。

ベンチマーク

次の表は、12pt半径の影を持つピクセル2で100 150x200pt <Image>をレンダリングする際にreact-native-fast-shadow 、React-Native-androw、およびReact-Native-Shadow-2のメモリ消費を比較しています。このアプリは、デバッグバリアントとエルメスを使用して構築されました。