고요빛물결

Redshop의 헤더

· 2016-11-29 (화) 02:23:16 · 1532

탑에는 

 

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를 이용해서 각 아이콘에 대해서 연결해 주면 될것 같습니다.

 

9b0d795078ab2c47ef4a451eab43b05c_1480291658_8059.png
 

 

[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]

 

|
댓글을 작성하시려면 로그인이 필요합니다.

앱개발

758건
+
분류 제목 글쓴이 날짜 조회
16-11-30 조회 1,862
16-11-30 조회 1,438
16-11-29 조회 1,339
16-11-29 조회 1,518
16-11-29 조회 1,533
16-11-28 조회 1,359
16-11-28 조회 1,321
16-11-28 조회 1,484
16-11-27 조회 2,047
16-11-27 조회 1,111
16-11-27 조회 1,071
16-11-26 조회 1,691
16-11-26 조회 1,394
16-11-26 조회 1,429
16-11-25 조회 1,156
16-11-25 조회 1,380
16-11-25 조회 1,348
16-11-24 조회 1,505
16-11-24 조회 1,334
16-11-24 조회 1,327
16-11-23 조회 1,305
16-11-23 조회 1,841
16-11-23 조회 1,302
16-11-22 조회 1,587
16-11-22 조회 1,430
16-11-22 조회 1,769
16-11-21 조회 1,739
16-11-21 조회 1,674
16-11-21 조회 2,426
16-11-20 조회 1,354