[React-Native] #4_스타일링

목차

• 스타일 지정
• StyleSheet
• 기본 스타일 속성

---

 

1.  스타일 지정

• 기존 코드에 View컴포넌트를 추가해서 화면을 구성한 코드이다.
  

  import React from 'react'
  import {View, SafeAreaView, Text} from 'react-native'
  import ArrowComponent from './src/screens/ArrowComponent'
  
  const realName = '2HS'
  export default function App() {
    return(
      <SafeAreaView>
        <View>
          <Text> Hello RN World! </Text>
        </View>
        <View>
          <ArrowComponent myName={realName}/>
        </View>
      </SafeAreaView>
    )
  }

• 위 코드에 스타일을 지정해준 코드이다.
  

  import React from 'react'
  import {View, SafeAreaView, Text} from 'react-native'
  import ArrowComponent from './src/screens/ArrowComponent'
  
  const realName = '2HS'
  export default function App() {
    return(
      <SafeAreaView style={{flex: 1, alignItems: 'center'}}>
        <View
          style={{
            width:'100%',
            flex:1,
            backgroundColor:'grey',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
          <Text style={{fontSize:25}}> Hello RN World! </Text>
        </View>
        <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
          <ArrowComponent myName={realName}/>
        </View>
      </SafeAreaView>
    )
  }

스타일 지정 전/후

이렇게 스타일 속성을 이용하여 스타일을 지정해 줄 수 있다. 그러나 retrun문 내부에 직접 지정을 해주면 가독성이 떨어진다는 단점이 있다. 그래서 StyleSheet라는 컴포넌트를 이용해야 한다.

---

 

2.  StyleSheet

리액트 네이티브에서 제공하는 코어 컴포넌트로 스타일을 따로 밖으로 빼서 지정해줄 수 있다.

import {StyleSheet} from 'react-native'

• 위의 스타일 지정 코드를 StyleSheet을 이용하여 재구성한 코드이다.
  

  import React from 'react'
  import {View, SafeAreaView, Text} from 'react-native'
  import ArrowComponent from './src/screens/ArrowComponent'
  import {StyleSheet} from 'react-native'
  
  const realName = '2HS'
  export default function App() {
    return(
      <SafeAreaView style={styles.safeAreaView}>
        <View style={[styles.view, {width:'100%',backgroundColor:'grey'}]}>
          <Text style={{fontSize:25}}> Hello RN World! </Text>
        </View>
        <View style={styles.view}>
          <ArrowComponent myName={realName}/>
        </View>
      </SafeAreaView>
    )
  }
  
  const styles = StyleSheet.create({
    safeAreaView:{
      flex: 1,
      alignItems: 'center'
    },
    view:{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }
  })​

<View style={[styles.view, {width:'100%',backgroundColor:'grey'}]}>
  <Text style={{fontSize:25}}> Hello RN World! </Text>
</View>

retrun문의 첫 번째 View를 보면, 스타일 속성에 배열을 이용하여 적용할 수 있다는 것 또한 알 수 있다. 여기서 중괄호에 유의하여 공부를 해야겠다. 스타일 속성 내부는 객체로 이루어져야 해서 중괄호를 사용해주는 것이다. 가장 바깥쪽의 중괄호는 JSX문법이다.

---

 

3.  기본 스타일 속성

• width & height
  너비와 높이 조절 픽셀과 % 값으로 조절 가능
  

  width: '1px'
  height: '10%' //여기서 %는 남은 화면에 대한 비율​

• flex
  화면을 일정 비율로 분할하기 편리함
  

  <SafeAreaView style={{flex:0.5}}> //전체화면의 0.5만큼 할당
    <View style={{flex:1}}/> //부모컴포넌트인 SafeAreaView의 반
    <View style={{flex:1}}/> //부모컴포넌트인 SafeAreaView의 반 (둘이 1:1로 할당)
  </SafeAreaView>​

• margin & padding

margin : 이웃한 요소 간의 간격 조정
padding : 부모 컴포넌트와 자식 컴포넌트 간의 간격 조정 (부모 컴포넌트에서 지정)

<SafeAreaView style={{flex:1, backgroundColor:'green',padding:'5%'}}>
  <View style={{flex:1, backgroundColor:'red', margin:'5%'}}/>
  <View style={{flex:1, backgroundColor:'blue', margin:'5%'}}/>
</SafeAreaView>

Left, Right, Top, Bottom 값을 지정해 줄 수 있다.
Left와 Right을 동시 지정은 marginHorizontal(paddingHorizonntal)
Top과 Bottom을 동시 지정은 marginVertical(paddingVertical)
Left, Right, Top, Bottom 모두 지정은 margin(padding)

※ iOS에서 부모 컴포넌트의 padding값은 View컴포넌터여도 작동 X

 

• border
  테두리를 설정해줄 수 있다.
  Width : 두께 / Radius : 굴곡 / Color : 색 / Style : 유형(점선, 실선 등)

<SafeAreaView style={{padding:'5%'}}>
  <Text style={{
  borderWidth:2,
  borderRadius:25,
  borderColor:'blue'
  }}>
  	2HS
  </Text>
</SafeAreaView>

 

• alignItems
  자식 컴포넌트들의 정렬(left : 왼쪽 정렬, center : 가운데 정렬, right : 오른쪽 정렬, stretched : 늘려서 맞춤)

<SafeAreaView style={{padding:'5%', alignItems:'center'}}>
  <Text> 1 </Text>
  <Text> 2 </Text>
  <Text> 3 </Text>
  <Text> 4 </Text>
  <Text> 5 </Text>
  <Text> 6 </Text>
</SafeAreaView>

 

• flexDirection
  자식 컴포넌트들의 배치 방향 설정 (row가로, column세로) 기본값 : column

<SafeAreaView style={{padding:'5%', flexDirection:'row'}}>
  <Text> 1 </Text>
  <Text> 2 </Text>
  <Text> 3 </Text>
  <Text> 4 </Text>
  <Text> 5 </Text>
  <Text> 6 </Text>
</SafeAreaView>​

 

• justifyContent
  자식 컴포넌트들의 간격(flex-start, flex-end, center, space-around, space-between, space-evenly)
  flexDirection이 'row'임을 생각하고 보자
  

  <SafeAreaView style={{padding:'5%', flexDirection:'row', justifyContent:값}}>
        <Text style={{}}> 1 </Text>
        <Text style={{}}> 2 </Text>
        <Text style={{}}> 3 </Text>
        <Text style={{}}> 4 </Text>
        <Text style={{}}> 5 </Text>
        <Text style={{}}> 6 </Text>
      </SafeAreaView>​

flex-start(기본값)

flex-end

center

space-around : 양끝 포함 일정한 간격(자식이 가운데 위치하도록)

space-between : 양끝 제외

space-evenly : 양끝도 동일한 간격으로

 

• flexWrap
  줄을 바꿔가면서 잘리는 곳 없이 정렬해서 렌더링
  
  
• fontSize & fontWeight & textAlign & color & backgroundColor
  텍스트 크기, 텍스트 굵기, 텍스트 정렬, 텍스트 색, 배경 색