React Native Box Shadow
今日のチュートリアルでは、Android および iOS デバイス用の React Native アプリでボックス シャドウを使用する方法を示します。
React Native Box Shadow
ボックス シャドウは、React Native アプリに実装するのが常に簡単であるとは限りません。 開発者は Android および iOS プラットフォーム用に設計する必要があるため、プラットフォーム固有の実装手法を使用して均一なボックス シャドウを実装するには時間がかかる場合があります。
4つの React Native シャドウ プロパティを利用して、iOS デバイス用のシャドウ ボックスを生成できます。
shadowColor
は、ボックスの影の色を定義します。 これが Android デバイスで動作するshadowProp
の唯一の例であることを強調しておく必要があります。shadowOffset
プロップは、数値を持つwidth
およびheight
パラメータを持つオブジェクトを許可します。ShadowOpacity
は、ボックスの影の透明度を制御します。 prop の値は0
から1
まで変化します。0
は完全な透明度を表し、1
は完全な不透明度を表します。shadowRadius
は、コンポーネントのぼかし半径を設定するための値として整数を受け入れます。 値が大きいほどぼかしが大きくなり、影が広く明るくなります。 この prop には負の値は使用できません。
ボックス シャドウをカード コンポーネントに追加し、次の操作を行って、これらのプロパティを機能させましょう。
コード例:
import {StyleSheet, Text, View} from 'react-native';
import {Card} from 'react-native-paper';
export default function App() {
return (
<View style={[styles.card, styles.shadowProp]}>
<View>
<Text style={styles.heading}>React Native Box Shadow</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
heading: {
fontSize: 18,
fontWeight: "600",
marginBottom: 13,
},
card: {
backgroundColor: "red",
borderRadius: 8,
paddingVertical: 45,
paddingHorizontal: 25,
width: "20%",
marginVertical: 10,
},
shadowProp: {
shadowColor: "black",
shadowOffset: { width: 2, height: 4 },
shadowOpacity: 1,
shadowRadius: 5,
},
});
このコードにより、アプリはボックス シャドウ付きのカードを生成します。
Android では、Android Elevation
API を使用する elevation
prop を使用してボックス シャドウを作成できます。 オブジェクトにドロップ シャドウを与え、重なり合うビューの z-order
を変更します。
ボックス シャドウをカード コンポーネントに追加して、このように使用する方法を見てみましょう。 まず、styles.elevation
属性は <View>
パーツに適用された場合にのみ機能することに注意してください。
コード例:
import {Card} from 'react-native-paper';
import {StyleSheet, Text, View} from './App/react-native';
export default function App() {
return (<View style = {[styles.card, styles.elevation]}><View>
<Text style = {styles.heading}>React Native Box
Shadow</Text>
</View>
<Text>Using the elevation style prop</Text>
</View>);
}
const styles = StyleSheet.create({
heading: {
fontSize: 18,
fontWeight: '600',
marginBottom: 13,
},
card: {
backgroundColor: 'white',
borderRadius: 8,
paddingVertical: 45,
paddingHorizontal: 25,
width: '30%',
marginVertical: 10,
marginLeft: 50,
marginTop: 50,
},
elevation: {
elevation: 30,
shadowColor: 'red',
},
});
Android デバイスを接続して、コードが機能するかどうかを確認しました。 次の出力を参照してください。期待どおりに動作しています。
ボックス シャドウのぼかし半径、不透明度、またはオフセットを制御することはできません。 その色を制御できます。 前の話に基づいて、React-Native モバイル アプリケーションで影の効果を作成する方法を学びました。
BoxShadow
と BorderShadow
がサポートする多くのプロパティについて学びました。 テキスト、ボックス、境界線に影の効果を追加しました。
React-Native でシャドウ効果を作成するための構文は比較的単純です。 したがって、いくつかのスクリプトを使用すると、影の効果を備えた素晴らしいユーザー インターフェイスを作成できます。 この効果は、主に動きを追跡し、サーフェスのエッジを決定するために使用されます。
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn