기본 테두리 반경 반응
이 기사에서는 반응 네이티브에서 borderRadius를 활용하는 방법을 설명합니다. 먼저, React Native에서 borderRadius 소품의 예를 살펴보고 이해할 것입니다.
우리는 또한 반응 네이티브에서 borderRadius를 활용하는 방법과 주어진 상자 모서리를 둥글게 만드는 방법을 배웁니다.
기본 테두리 반경 반응
React Native는 모든 모서리를 둥글게 하기 위해 borderRadius 소품을 제공합니다. borderRadius 소품은 1과 100 사이의 숫자만 허용합니다. 100 이상을 입력하면 결과는 100 값과 같아야 합니다.
예제 코드:
import React from 'react';
import {StyleSheet, View} from 'react-native';
const App = () => {
return (<View style = {styles.container}><View style = {
styles.middle
} />
</View>);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
padding: 20,
margin: 10,
},
middle: {
flex: 0.3,
backgroundColor: '#01CDE8',
borderWidth: 5,
borderRadius: 10,
},
});
export default App;
둥근 테두리가 숨겨져 있으면 overflow: 'hidden'도 시도하십시오. borderRadius 소품은 네 모서리 모두에서 확장되는 곡선을 만드는 데 사용됩니다.
그러나 주어진 교차점에 특정 곡률을 추가하려면 borderTopRightRadius, borderTopLeftRadius, topStartRadius의 경계 경계 및 TopEndRadius와 같은 다른 고유 속성이 필요합니다.
그러나 borderTopLeftRadius 및 borderTopStartRadius, borderTopRightRadius 및 borderTopEndRadius와 같은 일부 속성의 동작은 일관됩니다. 결과적으로 두 소품은 동일합니다.
출력:
우리 모두는 borderRadius 소품이 모든 모서리를 둥글게 한다는 것을 알고 있지만 특정 모서리를 둥글게 하려면 다음 지침을 참조하십시오.
TopStartRadius- 왼쪽 상단 모서리에 테두리를 만듭니다.TopEndRadius- 오른쪽 상단 모서리에 테두리를 만듭니다.BottomStartRadius- 왼쪽 하단 모서리를 만듭니다.BottomEndRadius- 오른쪽 아래 모서리 테두리를 만듭니다.
아래 예를 들어 설명하겠습니다.
import React from 'react';
import {StyleSheet, View} from 'react-native';
const App = () => {
return (<View style = {styles.container}><View style = {
styles.middle
} />
</View>);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
padding: 20,
margin: 10,
},
middle: {
flex: 0.3,
backgroundColor: '#01CDE8',
borderWidth: 5,
backfaceVisibility: 'hidden',
borderTopStartRadius: 1,
borderTopEndRadius: 20,
borderBottomStartRadius: 20,
borderBottomEndRadius: 1,
},
});
export default App;
출력:
개인용 또는 일상적인 모니터링 애플리케이션을 위한 기본 대시보드 또는 프로필 페이지를 생성해 보겠습니다. 이 예에서는 borderRadius를 사용하여 프로필 사진, 카드, 버튼, 입력 필드 및 아이콘을 디자인합니다.
예제 코드:
import {Image, StyleSheet} from 'react-native';
export default function App() {
return (
<Image
style = {styles.profile} source = {
{
uri:
'https://cdn.britannica.com/43/172743-138-545C299D/overview-Barack-Obama.jpg?w=800&h=450&c=crop',
}
} />
);
}
const styles = StyleSheet.create({
profile: {
marginTop: 20,
height: 100,
width: 100,
backgroundColor: "wheat",
borderRadius: 50,
},
});
이미지 구성 요소에는 이제 원형 borderRadius가 있습니다. 결과는 다음과 같습니다.
프로필 사진의 썸네일을 꾸미는 용도로 널리 쓰인다는 점 참고하세요.
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