Programing/React, React Native

[React Native] 절대 위치 컴포넌트 만들기(Position Absolute)

hye3193 2024. 7. 16. 22:11

게시글 리스트(FlatList) 위에 고정된 위치에 글쓰기 버튼을 만들어야 하는데, position을 absolute로 주어 쉽게 설정할 수 있다

WriteButton: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    borderColor: '#5678F0',
    borderWidth: 3,
    borderRadius: 50,
    width: 60,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff'
}

위와 같이 스타일을 설정하였는데, position을 absolute로 설정했으면 top/bottom/left/right를 이용해 절대 위치를 고정시켜 주면 된다

기본값은 top:0, left:0이고(좌측 상단이 기본 위치), 네 면 중 원하는 위치를 기준으로 설정해 주면 된다