[react-native] EXPO로 시작해보기 5 - 태그 추가해 보기 <LinearGradient><Ionicons><StatusBar>

LinearGradient 배경에 그라디언트 효과를 주는 컴포넌트 

2가지 이상의 색상으로 그라디언트 효과를 나타낼 수 있다. 

import { LinearGradient } from 'expo';

<LinearGradient style={styles.container} colors={["#F07C84","#FDEAEB"]} >
      
</LinearGradient>

https://docs.expo.io/versions/v33.0.0/sdk/linear-gradient/

 

 

 

 

 

 

상태바를 표시하는 StatusBar 

light-content(왼쪽) 와 dark-content(오른쪽) 로 bar 의 스타일을 선택할 수 있다. 

<StatusBar barStyle="light-content" /> 

 

 

 

 

 

 

 

 

 

expo의 아이콘을 사용하는 

import { Ionicons } from '@expo/vector-icons';

<Ionicons color="white" size={144} name="ios-bluetooth" />

Ionicons의 경우 color, size, name이 필요하다

 

 

https://expo.github.io/vector-icons/

 

 

이때 아이콘에 따라 import 해주는 것이 다름

아래의 아이콘을 사용할때는 

 

 

 

 

이때는 

import { Ionicons } from '@expo/vector-icons';

<Ionicons />를 사용

 

 

이때는

import { MaterialCommunityIcons } from '@expo/vector-icons';

<MaterialCommunityIcons />를 사용한다.