Redshop의 헤더
-
아름다운소환
- 0건
- 255회
- 16-11-29 02:23
탑에는
react-native-vector-icons 를 사용해서 Menu, login, shopping cart와 sir theme 로고를 만들어 봤습니다.
https://github.com/oblador/react-native-vector-icons
에서 세가지와
http://fontawesome.io/icon/bars/
http://fontawesome.io/icon/user/
http://fontawesome.io/icon/shopping-cart/
레드샵의 로고(png)을 이용했습니다.
먼저 아래 코드와 같이 import를 해 주시고..
제일 위 header에 대한 크기를 정해 줍니다. (여기서는 높이를 50으로..)
marginTop 20은 스마트폰의 상단 status bar에 겹치지 않게 하기 위해서..
다음에 navigator를 이용해서 각 아이콘에 대해서 연결해 주면 될것 같습니다.
[code]
import Icon from 'react-native-vector-icons/FontAwesome';
<View style={{ alignItems: 'center', margin: 2, marginTop: 20, backgroundColor: 'red', height: 50, flexDirection: 'row'}}>
<View style={{flex: 1, justifyContent: 'flex-start', flexDirection: 'row'}}>
<Icon name = 'navicon' color='black' size={32} style={{color: 'white', padding: 2}} />
</View>
<ResponsiveImage source={require('./images/mobile_logo.png')} initWidth="200" initHeight="30"/>
<View style={{flex: 1, justifyContent: 'flex-end', flexDirection: 'row'}}>
<Icon name='user' color='black' size={32} style={{color: 'white', padding: 2}} />
<Icon name='shopping-cart' color='black' size={32} style={{color: 'white', padding:2}} />
</View>
</View>
[/code]
test.txt
- 0
- 2021-09-06 23:01:12
- 12byte
등록된 댓글이 없습니다.