아이콘 (+ 아이콘 버튼)

react-native-vector-icons

설치

$ yarn add react-native-vector-icons

or

$ npm install --save react-native-vector-icons

코드에 적용

//라이브러리 임포트
import Ionicons from 'react-native-vector-icons/Ionicons';


//필요한 곳에 이런 식으로 코드 작성해서 아이콘 이미지 불러오면 됨.
<Ionicons
    name={iconName}
    size={horizontal ? 20 : 25}
    color={tintColor}
/>

에러 핸들링

 

iOS

[vector-icons] ios 추가설정

프로젝트 경로의 ios/프로젝트명/ 디렉토리로 이동하면 Info.plist 파일을 찾을 수 있다.

열어서 아래와 같이 추가하고 저장하면 된다.

<key>UIAppFonts</key>
<array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
</array>

 

Android

[vector-icons] android 추가 설정

안드로이드는 android/app/build.gradle 파일을 열어서 아래 줄을 추가하면 된다.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

아이콘 버튼

예제 코드

import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Login with Facebook
    </Text>
  </Icon.Button>
);

이런식으로 가능.

 

프로퍼티

• color

• size

• iconStyle

• backgroundColor

• borderRadius

• onPress