기본 상자 그림자 반응
오늘의 튜토리얼은 Android 및 iOS 기기용 React Native 앱에서 상자 그림자를 사용하는 방법을 보여줍니다.
기본 상자 그림자 반응
상자 그림자는 React Native 앱에서 구현하기가 항상 쉬운 것은 아닙니다. 개발자는 Android 및 iOS 플랫폼용으로 설계해야 하므로 플랫폼별 구현 기술로 균일한 상자 그림자를 구현하는 데 시간이 많이 걸릴 수 있습니다.
네 가지 React Native 그림자 속성을 활용하여 iOS 장치용 그림자 상자를 생성할 수 있습니다.
shadowColor는 상자 그림자의 색상을 정의합니다. 이것이 Android 기기에서 작동하는shadowProp의 유일한 예임을 강조해야 합니다.shadowOffset소품은 숫자 값이 있는width및height매개변수가 있는 개체를 허용합니다.ShadowOpacity는 상자 그림자의 투명도를 제어합니다. 소품의 값은0에서1까지 다양하며0은 전체 투명도를 나타내고1은 완전한 불투명도를 나타냅니다.shadowRadius는 구성 요소의 흐림 반경을 설정하는 값으로 정수를 허용합니다. 값이 증가할수록 블러가 증가하여 그림자가 더 넓고 밝아집니다. 이 소품에는 음수 값이 허용되지 않습니다.
카드 구성 요소에 상자 그림자를 추가하고 다음을 수행하여 이러한 속성을 작동시켜 보겠습니다.
예제 코드:
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 소품을 사용하여 상자 그림자를 만들 수 있습니다. 객체에 그림자를 주고 겹치는 보기에 대한 z 순서를 변경합니다.
카드 구성 요소에 상자 그림자를 추가하여 이 방법을 사용하는 방법을 살펴보겠습니다. 먼저 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',
},
});
우리는 코드가 작동하는지 여부를 확인하기 위해 안드로이드 장치를 연결했습니다. 다음 출력을 참조하면 예상대로 작동합니다.
상자 그림자의 흐림 반경, 불투명도 또는 오프셋을 제어할 수 없습니다. 색상을 제어할 수 있습니다. 이전 이야기를 바탕으로 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