React-Native ( style 속성과 StyleSheet API 이해하기) - part2

1. 자원과 아이콘 사용하기

$ npm i react-native-vector-icons react-native-paper color faker
$ npm i -D @types/color @types/faker

$ npm i -D @types/react-native-vector-icons

/* eslint-disable */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  Platform,
  Dimensions,
  View,
  ImageBackground,
} from 'react-native';

import {Colors} from 'react-native-paper';
import Color from 'color';

const {width, height} = Dimensions.get('window');

const App = () => {
  return (
    <SafeAreaView style={[styles.flex]}>
      {/* <Text style={[styles.text]}>os: {Platform.OS}</Text>
      <Text style={[styles.text]}>width: {width}</Text>
      <Text style={[styles.text]}>height: {height}</Text>
      <View style={[styles.box, {borderRadius: 10}]} />
      <View style={[styles.box, styles.border]} />
      <View style={[styles.box, styles.border, {borderRadius: 10}]} /> */}
      <ImageBackground
        style={[styles.flex]}
        source={require('./src/assets/images/bg.jpg')}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeAreaView: {
    flext: 1,
    backgroundColor: Colors.blue500,
    paddingLeft: Platform.select({ios: 0, android: 20}),
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
    marginLeft: 50,
    marginTop: 20,
  },
  box: {
    width: '70%',
    height: 100,
    backgroundColor: 'white',
    marginBottom: 10,
    marginLeft: Platform.select({ios: 20, android: 10}),
  },
  border: {
    borderWidth: 10,
    borderColor: Colors.lime500,
  },
  flex: {
    flex: 1,
  },
});

export default App;

ImageBackground라는 코어 컴포넌트를 이용해서 백그라운드 이미지를 설정할 수 있습니다.

base 64 기법으로도 html에 img의 src에 url이 아닌 숫자와 문자로 구성된 긴 코드가 들어간 경우가 있었는데 data:image/png;base64와 같은 경우였다.
이는 이미지를 base64인코딩 방식으로 사용한다는 것이다.

Base64는 데이터를 64진법으로 나타내는 것으로
0부터 63까지 ABCD~0123~+/으로 나타낸다

https://www.base64-image.de/
에 들어가서 작은 이미지 같은 파일을 문서(Html, JS, CSS)에 인라인으로 작성할 수 있는데, 작성된 이미지와 같은 정보는 이미 문서에 포함되어 있기 때문에, 서버에 요청하지 않고도 이미지를 사용할 수 있다.

but코드의 가독성이 씹창난다는 단점이 있다.

Image 코어 컴포넌트는 ImageBackground처럼 이미지 파일을 화면에 렌더링하는 기능을 제공합니다.

하지만 Image는 ImageBackground와 달리 자식 컴포넌트를 가질 수 없습니다.

 

/* eslint-disable */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  Platform,
  Dimensions,
  View,
  ImageBackground,
} from 'react-native';

import {Colors} from 'react-native-paper';
import Color from 'color';

const {width, height} = Dimensions.get('window');
import * as D from './src/data';
import {Image} from 'react-native';

const avatarUrl = D.randomAvatarurl();
const avatarSize = 50;

const App = () => {
  return (
    <SafeAreaView style={[styles.flex]}>
      {/* <Text style={[styles.text]}>os: {Platform.OS}</Text>
      <Text style={[styles.text]}>width: {width}</Text>
      <Text style={[styles.text]}>height: {height}</Text>
      <View style={[styles.box, {borderRadius: 10}]} />
      <View style={[styles.box, styles.border]} />
      <View style={[styles.box, styles.border, {borderRadius: 10}]} /> */}
      <ImageBackground
        style={[styles.flex]}
        source={require('./src/assets/images/bg.jpg')}>
        <Image source={{uri: avatarUrl}} style={[styles.image]} />
      </ImageBackground>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeAreaView: {
    flext: 1,
    backgroundColor: Colors.blue500,
    paddingLeft: Platform.select({ios: 0, android: 20}),
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
    marginLeft: 50,
    marginTop: 20,
  },
  box: {
    width: '70%',
    height: 100,
    backgroundColor: 'white',
    marginBottom: 10,
    marginLeft: Platform.select({ios: 20, android: 10}),
  },
  border: {
    borderWidth: 10,
    borderColor: Colors.lime500,
  },
  flex: {
    flex: 1,
  },
  image: {
    width: avatarSize,
    height: avatarSize,
    borderRadius: avatarSize / 2,
  },
});

export default App;

---

* 폰트 설치하기

 

이제 Dancing Script 폰트를 src/assets/fonts 디렉터리의 내용을 앱에 반영해 봅시다

src/assets/fonts 디렉터리의 자원 파일을 앱에 포함하려면 npx react-native link라는 명령을 실행해야 합니다. 그러나 이 명령은 react-native.config.js라는 구성 파일이 필요합니다. 먼저 package.json파일이 있는 디렉터리에서

$ touch react-native.config.js

으로 파일 하나를 생성해 줍니다

 

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

을 작성해 줍니다

이 때 project가 반드시 있어야 하는데 이는 ios와 android디렉터리를 대상으로 동작해야 한다는 것을 지정하는 것입니다

 

이미지 파일과 달리 폰트 파일은 그냥 사용할 수가 없고 npx react-native  link명령을 실행해야 합니다.

$ npx react-native link

명령을 통해 앞서 작성한 react-native.config.js 파일 내용을 반영합니다.

 

또한 

$ npx react-native link react-native-vector-icons

을 실행하는데 이 명령은 ios 디렉터리의 Podfile에 이 패키지와 관련된 내용을 삽입만 합니다.

즉 아직 원격지의 패키지(또는 라이브러리)가 개발 컴퓨터 쪽에 설치되지 않은 상태입니다.

그래서 다음 명령으로 원격지의 패키지를 개발 컴퓨터 쪽에 설치해야 합니다

iOS용 개발은 이처럼 npx react-native link 명령을 실행했으면 npx pod-install명령도 항상 실행해야 합니다.

$ npx pod-install

이 명령을 실행하면 RNVectorIcons 네이티브 모둘용 오브젝티브-C패키지가 잘 설치되었다는 메세지를 볼 수 있습니다.

---

하지만 여기서 저와같은 오류가 나타날 수 있습니다 ( Unrecognized font family 에러 )

ios > client 폴더로 들어가서 Info.plist를 에디터에서 연다

<dict> 내부에서 다음과 같은 내용을 복사 붙여넣기 한 이후에 저장한다

실행 하기전 터미널에서 cd ios && pod install 하는 것을 잊지 않는다

새로운 font나 icon을 사용할 때도 유사하게 추가하면 된다.

 

<dict>
	....
  	<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>
	</array>
</dict>

ios의 경우 pod를 사용하여 React-native-vector-icons를 추가해야 하는데

원래는 react-native link react-native-vector-icons명령어를 통해 link를 시켜줘야 한다

하지만 react-native 0.6 버전 부터 auto link를 지원하니 unlink를 하라 한다

 

그 다음 info.plist에 위 코드를 삽입하는데 info.plist는 ios의 패키지 필수 정보를 저장하는 package.json같은 녀석이다.