[React Native] 03-3 자원과 아이콘 사용하기

ImageBackground 코어 컴포넌트 사용하기

import {ImageBackground} from 'react-native'

ImageBackground 사용법

<ImageBackground style={{flex: 1}} source={require('./src/assets/images/bg.jpg)} />

✅ 이름에 'Image' 자가 포함된 Image나 ImageBackground 컴포넌트는 항상 source 속성에 require 를 사용하여 읽는 방식으로 파일을 설정해야 한다

✅ width 와 height 속성값을 반드시 설정해야 한다.

✅ ImageBackground 컴포넌트는 자식 컴포넌트를 가질 수 있다.

 

Image 코어 컴포넌트

import {Image} from 'react-native'

✅ Image 컴포넌트는 자식 컴포넌트를 가질 수 없다.

 

※ 앱의 자원이 아닌 다른 원격지 서버에서 파일을 내려받아 렌더링할 때

➡️ {uri: 이미지_파일_웹_주소} 형태의 객체를 설정해야 한다.

 

import * as D from './src/data'

const avatarUrl = D.randomAvatarUrl()

<Image source={{uri: avatarUrl}} style={[styles.image]} />

 

폰트 직접 설치하기 사용하기

src/assets/fonts 디렉터리의 자원 파일을 앱에 포함하려면

1) react_native.config.js 라는 구성 파일을 생성

2) npx react-native link 명령어 실행  ➡️ 문제 발생 아래에 해결법

 

1) react_native.config.js 라는 구성 파일을 생성

react-native.config.js

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts'],
}

✅ 프로젝트 키는 반드시 있어야 한다.

 

2) npx react-native link 명령어 실행

 ➡️ 오토링킹 때문에 React Native 0.69 부터 link와 unlink 기능이 사라졌다.

✅ 대신 아래와 같은 명령을 하면 정상 작동한다.

npx react-native-asset

 

폰트 설정

const styles = StyleSheet.create({
	regular: {fontFamily: 'RobotoSlab-Regular', fontWeight: '400'},
  	medium: {fontFamily: 'RobotoSlab-Medium', fontWeight: '500'},
  	semiBold: {fontFamily: 'RobotoSlab-Bold', fontWeight: '600'},
  	bold: {
    fontFamily: 'RobotoSlab-ExtraBold',
    fontWeight: Platform.select({ios: '700', android: '600'}),
})

✅  fontWeight :  글꼴 두께 설정 가능 ➡️ 숫자도 '100' 처럼 문자열로 설정해야 한다.

 

※ 부모 요소에서 자식 요소의 스타일을 설정하지 못하기 때문에 아래 와 같이 일일이 속성을 설정해줘야 한다.

<View style={[styles.flex, styles.padding10]}>
      <Text style={[styles.text, styles.regular]}>{text} [regular]</Text>
      <Text style={[styles.text, styles.medium]}>{text} [medium]</Text>
      <Text style={[styles.text, styles.semiBold]}>{text} [semi bold]</Text>
      <Text style={[styles.text, styles.bold]}>{text} [bold]</Text>
</View>

textWeight 스타일 속성 : 'left', 'center, 'right' ➡️기본값은 'light' 이다.

 

 

---

react-native-vector-icons 아이콘 패키지

Icon 컴포넌트

import Icon from 'react-native-vector-icons/아이콘_세트_이름'

아이콘 세트 종류는 github.com/oblador/react-native-vector-icons 에서 확인 가능

Icon 컴포넌트 사용법

<Icon name='아이콘_이름' size={아이콘_크기} color='아이콘_색상' onPress={콜백_함수} />

✅ onPress 콜백 함수는 Button이나 TouchableOpacity 컴포넌트의 onPress와 사용법이 같다.

 

※iOS 에서 아이콘이 제대로 나타나지 않을 때

ios/AppName/Info.plist 의 <array> </array> 안에 아이콘 패키지의 폰트를 추가해 준다

 

<key>UIAppFonts</key>

 <array>

    /* 이전에 추가해놓은 폰트들이 있을 것이다. */

 </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>Fontisto.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>