expo 아이콘 사용하기

라이브러리 설치

npm install @expo/vector-icons

어떤 아이콘이 있는지 아래의 페이지를 참조하세요.

더하기 아이콘 사용

https://icons.expo.fyi/
페이지의 검색창에plus를 삽입합니다.

좋아하는 아이콘을 클릭하면 아래 화면을 볼 수 있습니다.

이 두 줄을 CircleButon에 복사하세요.
props에서 icon을 변경할 수 있도록 부모님께서name을 받아들였습니다.
CircleButton.jsx

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { string, shape } from 'prop-types';
import { Feather } from '@expo/vector-icons'; 

// eslint-disable-next-line react/function-component-definition
export default function CircleButton(props) {
  const { style, name } = props;
  return (
    <View style={[styles.circleButton, style]}>
      <Feather name={name} size={30} color="white" />
    </View>
  );
}

CircleButton.propTypes = {
  style: shape(),
  name: string.isRequired,
};

CircleButton.defaultProps = {
  style: null,
};

const styles = StyleSheet.create({
  circleButton: {
    backgroundColor: '#D81B60',
    width: 65,
    height: 65,
    borderRadius: 32,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    right: 40,
    bottom: 40,
    /* shadowはiphoneにしか効かないCSS */
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.35,
    shadowRadius: 5,
    /* elevationはAndroid用のCSS */
    elevation: 8,
  },
  circleButtonLabel: {
    color: '#fff',
    fontSize: 32,
    lineHeight: 32,
    fontWeight: 'bold',
  },
});

모 어셈블리는 다음과 같이 사용할 수 있습니다.

<CircleButton style={{ top: 170, bottm: 'auto' }} name="plus" />

주의점

이번에는 Circle Button입니다.jsx 구성 요소 내에서 Feather 아이콘을 사용합니다.
그래서 어떤 아이콘을 사용할 수 있을까
https://icons.expo.fyi/
그런 다음 Filters에서 Feather를 선택하여 읽어들입니다.