React Native 에서 벡터 아이콘을 사용하기 위해서
react-native-vector-icons 라이브러리를 사용한다
설치
npm install --save react-native-vector-icons
환경별 설정
react native 는 iOS, ANDROID 앱으로 만들어지다 보니
iOS 와 Android 용으로 각각 설정해줘야 한다
iOS App 에 폰트 추가
1. Fonts 그룹 만들기
XCode 로 해당 프로젝트를 실행해서
File > New > Group 으로 Fonts 라는 그룹을 만들어 준다
2. 폰트 파일 복사해오기
Finder 로 react-native-vector-icons > Fonts 밑의 파일을 드래그 해서
Xcode 에 만들어 놓은 Fonts 그룹으로 드롭한다
팝업창이 뜨면 Copy items if needed 를 체크하고 Finish 한다
3. Info.plist 에 폰트 추가
ios > 프로젝트명 > Info.plist 를 에디터로 열어서
아래 key, array 를 추가한다
<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>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
<string>Fontisto.ttf</string>
</array>
Info.plist 에 추가하면
XCode 에서 Info.plist 를 클릭하면
오른쪽 Fonts provided by application 에 16개의 items 가 추가된 것을 확인할 수 있다
4. Copy Bundle Resources 에 Fonts 추가하기
XCode 프로젝트 의 Build Phases 탭에 Copy Bundle Resources 에
Font 파일들을 Add 합니다
Andriod App 에 폰트 추가
Gladle 을 이용해 자동으로 추가합니다
1. andorid > app > build.gradle 에 폰트 추가하기
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
android 밑이 아닌 android > app 밑에 있는 build.gradle 에 추가합니다
2. android studio 실행해서 Gradle 시작하기
안드로이드 스튜디오를 실행해서 android 프로젝트 열어주면 위에서 수정한 gradle 파일이
자동으로 설정해 줍니다
import Icon from 'react-native-vector-icons/FontAwesome';
...생략...
return (
<SafeAreaView style={styles.container}>
<StatusBar style="auto" />
<Title title="Todo List" />
<Input
value={newTask}
onChangeText={_handleTextChange}
onSubmitEditing={_addTask}
/>
<Button title="Add" onPress={() => _addTask()} />
<Icon name="rocket" size={30} color="#900" />
</SafeAreaView>
);
}
...생략...
# metro 실행
npx react-native start
# ios app 실행
npx react-native run-ios
# 안드로이드 app 실행
npx react-native run-android
폰트적용 확인하기
로케트 vector 이미지가 둘 다 적용된 것을 확인할 수 있습니다
'IT > React' 카테고리의 다른 글
RN(ReactNative) error Parsing error Unexpected token < 수정 (0) | 2022.08.08 |
---|---|
RN(ReactNative) jsx 파일 사용하기 (0) | 2022.08.08 |
RN (ReactNative) 사용자 폰트 적용하기 (0) | 2022.08.08 |
개발시 사용하는 벡터 아이콘 모음 (0) | 2022.08.05 |
React 18 에는 enzyme 사용하지 마세요 (0) | 2022.08.01 |
REACT NATIVE UI COMPONENT (0) | 2022.08.01 |
Context API React (0) | 2022.08.01 |
React Components (0) | 2022.07.27 |