React Native Box Shadow

Shiv Yadav 2023年10月12日
React Native Box Shadow

今日のチュートリアルでは、Android および iOS デバイス用の React Native アプリでボックス シャドウを使用する方法を示します。

React Native Box Shadow

ボックス シャドウは、React Native アプリに実装するのが常に簡単であるとは限りません。 開発者は Android および iOS プラットフォーム用に設計する必要があるため、プラットフォーム固有の実装手法を使用して均一なボックス シャドウを実装するには時間がかかる場合があります。

4つの React Native シャドウ プロパティを利用して、iOS デバイス用のシャドウ ボックスを生成できます。

  1. shadowColor は、ボックスの影の色を定義します。 これが Android デバイスで動作する shadowProp の唯一の例であることを強調しておく必要があります。
  2. shadowOffset プロップは、数値を持つ width および height パラメータを持つオブジェクトを許可します。
  3. ShadowOpacity は、ボックスの影の透明度を制御します。 prop の値は 0 から 1 まで変化します。0 は完全な透明度を表し、1 は完全な不透明度を表します。
  4. 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,
  },
});

このコードにより、アプリはボックス シャドウ付きのカードを生成します。

react ネイティブ ボックス シャドウ - boxshadow

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 ネイティブ ボックス シャドウ - boxshadow

ボックス シャドウのぼかし半径、不透明度、またはオフセットを制御することはできません。 その色を制御できます。 前の話に基づいて、React-Native モバイル アプリケーションで影の効果を作成する方法を学びました。

BoxShadowBorderShadow がサポートする多くのプロパティについて学びました。 テキスト、ボックス、境界線に影の効果を追加しました。

React-Native でシャドウ効果を作成するための構文は比較的単純です。 したがって、いくつかのスクリプトを使用すると、影の効果を備えた素晴らしいユーザー インターフェイスを作成できます。 この効果は、主に動きを追跡し、サーフェスのエッジを決定するために使用されます。

著者: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

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

関連記事 - React Native