기본 절대 위치 반응
React Native의 모든 것은 기본적으로 상대 위치로 설정되지만 절대 위치 지정은 항상 상위 위치와 관련됩니다. React Native의 위치는 표준 CSS와 유사합니다.
기본 절대 위치 반응
특정 양의 논리적 픽셀만큼 부모를 기준으로 자식을 배치하려는 경우 자식이 절대 위치를 갖도록 설정합니다.
예를 보겠습니다.
<>
<View
style={{
marginTop: 40,
height: 100,
backgroundColor: "#ccc",
}}
>
<View
style={{
height: 100,
width: 100,
backgroundColor: "red",
position: "absolute",
right: 0,
bottom: 0,
}}
/>
</View>
</>
위의 코드는 주요 보기 구성 요소를 보여줍니다. 메인 컴포넌트 안에는 자식 view 컴포넌트가 있습니다.
부모 구성 요소를 변경하면 자식 구성 요소는 부모 구성 요소 안에 남아 있습니다.
출력:
여기 이 스크린샷에서 두 가지 구성 요소를 볼 수 있습니다. 즉, 하나는 회색이고 다른 하나는 빨간색입니다. 회색 구성 요소는 상위 구성 요소이고 빨간색 구성 요소는 하위 구성 요소입니다.
부모 구성 요소를 변경하면(높이를 100%로 만드는 것과 같이, 즉 flex = 1) 자식 구성 요소는 부모 구성 요소에 남아 있습니다.
<>
<View style={{
flex: 1,
marginTop: 40,
backgroundColor: '#ccc',
}}>
<View style={{
height: 100,
width: 100,
backgroundColor: 'red',
position: 'absolute',
right: 0,
bottom: 0,
}} />
</View>
</>
출력:
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