React Native - 앱 스타일링하기

앱 스타일링하기

Flexbox

특정 요소가 차지하는 공간을 제어할 수 있는 스타일링 프로퍼티 세트

• 모든 View에서 기본값으로 사용한다.
• 웹과 달리, 세로 정렬을 기본으로 한다.

flex: 1, // 사용할 수 있는 모든 공간을 차지하도록 확장
flexDirection: 'column', // 요소를 세로로 배치할지 가로로 배치할지

// 요소를 각 축에 어떻게 배치할지
justifyContent: 'flex-start', //주축을 따라 요소 정렬
alignItems: 'flex-start' //교차축을 따라 요소 정렬

iOS & Android 스타일링 차이점

스타일은 CSS와 달리 연속적으로 적용되지 않는다.

goalItem: {
    margin: 8,
    padding: 8,
    borderRadius: 6,
    backgroundColor: '#5e0acc',
    color: 'white'
  }

<Text style={styles.goalItem} key={goal}>
  {goal}
</Text>

ios에서는 Text 컴포넌트에 스타일링을 직접 적용했기 때문에 borderRadius가 적용되지 않는다.

<View style={styles.goalItem}>
            <Text key={goal}>
              {goal}
            </Text>
          </View>

View에 스타일을 적용해주면 해결된다.