React Native Box Shadow

Shiv Yadav 2023年10月12日

React Native React Native 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,
  },
});

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

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 モバイルアプリケーションで影の効果を作成する方法を学びました。

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

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

著者： Shiv Yadav

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.

React Native Box Shadow

関連記事 - React Native