[ReactNative-2] Component Style

View, SafeAreaView, ScrollView, KeyboardAvoidingView 등 View가 들어간 component들이 제공됨. 

react-native-paper 패키지: google material design의 ~colors.blue500 형태로 컬러 표기 가능함. 

 

View component 속성 

1. view component의 width, height 설정 방법 

• default 방식: parent component의 width 를 그대로 설정하고, height는 child component 의 height에 의해 결정된다. 
• px 숫자 설정
• Parent component의 width, height를 기준으로 자식 컴포넌트의 크기를 퍼센트로 설정하는 방법 
• flex 속성을 사용하는 방법이 있다. 
  
  • flex: 1 -> height: 100%와 같다. 근데 이때 height 속성을 같이 설정해주면 height, width가 우선순위가 더 높으므로 flex대신 height값이 설정됨. 

 

2. Margin (marginTop, marginBottom, marginLeft, marginRight)

• marginHorizontal: marginLeft = marginRight
• marginVertical: marginTop = marginBottom 
• margin: marginHorizontal = marginVertical (예를 들어 10%이면 부모 컴포넌트의 height, width 10%가 적용된다. ) 

 

3. Padding: parent component에 적용하는 속성 

 

4. flex 속성 

• style에서 flex속성을 적용할 수 있는데, 이때 flex: 1와 height: 100% 를 비교하면 flex는 같은 부모아래에 있는 다른 자식 컴포넌트들의 높이들을 제외한 여분을 가져오고, 100% 가 적용된다면 부모의 height전체가 가져와진다. 
• flex: 0 이라고 하면 부모 컴포넌트의 높이에 상관없이 자식 컴포넌트의 높이를 높이로 가지게 된다. 
• flex: 1, flex:3 으로 자식 컴포넌트들이 적용되어 있다면, 여분높이 / (1+3) 과 여분높이 / (1+3)*3의 값이 각각 적용되는 것이다. 
• flexDirection 에는 'row', 'column'으로 배치 방향을 정할 수 있다. 이때 main axis와 cross axis로 축을 나눌 수 있다. row 일 때는 main axis는 horizontal direction, cross axis는 vertical direction이 된다. alignItems는 cross axis에 적용이 되고, justifyContent 속성은 main axis에 적용이 된다.
  
• flexWrap은 default 값으로 nowrap이 적용되어 있고, wrap, wrap-reverse 를 설정할 수 있다. wrap은 줄바꿈, wrap-reverse는 역순으로 줄바꿈을 한다. 

 

5. Overflow

overflow 스타일 속성은 전체 컨텐츠의 크기가 컴포넌트 크기보다 클 때의 속성을 결정할 수 있는데, visible은 component 크기와 무관하게 바깥쪽으로도 렌더링 됨. hidden이면 밖에 렌더링 되지 않는다. 웹에서는 scroll을 설정하면 스크롤 효과가 발생하지만, reactNative에서는 scrollView나 FlatList같은 코어 컴포넌트에서만 가능함. 

 

6. scroll 효과 

ScrollView: scroll효과를 위해서 ScrollView component를 사용하는데 이때 style 속성 대신 contentContainerStyle속성을 대신 사용한다. 스크롤 효과를 위해서는 flex 가 설정되지 않았어야 함.

 

7. 떠있는 듯한 컴포넌트를 만들기 

• position 속성을 absolute로 지정하고, left, right, top, bottom스타일 속성을 사용해서 위치를 바꿀 수 있다. top 은 위를 기준으로 아래로 이동할 만큼의 거리를 지정하면 되고, 다른것도 마찬가지다. 
• position: absolute 는 조상중에 position이 없으면 viewport기준이 되며, parent에 position이 없고 grandparent에 position:relative이면 grandparent기준으로 정렬된다. 
• position: relative는 기존에 static일 때 기준으로 정렬된다. 
• 참고자료 : https://creamilk88.tistory.com/197

 

*Fragment component는 실제로 존재x. XML 문법이 요구하는 parent component로 동작하도록 만든 것.