React Native - 기본 Template Component 만들기(2)

이전 포스트에 이어서 기본 템플릿으로 좀 더 복잡한 컴포넌트를 만들어 보겠습니다.

 

1.  Button

• 버튼 명칭, 버튼 선택시 동작 함수, 버튼 선택범위 값(hipslop)을 props로 넘겨줌
• hipslop 은 버튼의 선택범위를 조절할 수 있는 것으로 props로 넘겨주지 않으면 기본값으로 '0' 을 지정하도록 함

import React, { Component } from 'react';
import { Pressable } from 'react-native';

export default class Button extends Component {
  render() {
    return (
      <Pressable 
        onPress={this.props.onPress} 
        hitSlop={this.props.hitSlop ?? {left:0, right:0, top:0, bottom:0}}
        >
          {this.props.children}
      </Pressable>
    )
  }
}

 

2.  Icon

• 기본적으로 가장 많이 사용하는 Expo 기본 icon 을 설정하여 사용
• props로 이름, 크기, 색상을 지정하여 넘겨줌

import React, { Component } from 'react'
import Ionicons from '@expo/vector-icons/Ionicons';

export default class Icon extends Component {
  render() {
    return (
      <Ionicons 
        name={this.props.name} 
        size={this.props.size} 
        color={this.props.color} 
        />
    )
  }
}

 

3.  Badge

• 뱃지는 특정 문자, 아이콘 등 위 또는 아래에 내용 변경사항에 대한 안내를 위해 표시하는 기능
• props로 기본 대상을 children으로 받아오고 스타일은 프로젝트내 일관성을 위해 고정값으로 지정
• 뱃지 표출위치는 absolute 로 지정
• 앞서 만든 Typography 템플릿 이용 크기와 색상 정도만 변경 가능하도록 함

import React, { Component } from 'react';
import { View } from 'react-native';
import Typography from './Typography';

export default class Badge extends Component {
  render() {
    return (
      <View>
        <View>
          {this.props.children}
          <View
            style={[{
              width: 16,
              height: 16,
              borderRadius: 8,
              backgroundColor: 'red',
              alignItems: 'center',
              justifyContent: 'center',
            }, {
              position: 'absolute',
              right: -5,
              top: -5
            }
            ]}
          >
            <Typography fontSize={this.props.fontSize} color={'white'}>N</Typography>
          </View>
        </View>
      </View>
    )
  }
}

 

badge sample

 

4.  Tab Icon

• 앱 하단에 표출되는 아이콘 템플릿으로 badge 적용을 옵션으로 처리
• 지금까지 언급한 기본 템플릿 Icon, Badge 조합으로 생성

import React, { Component } from 'react';
import { View } from 'react-native';
import Badge from './Badge';
import Icon from './Icons';

export default class TabIcon extends Component {
  render() {
    if (this.props.visibleBadge){
      return (
        <View>
          <Badge fontSize={10}>
            <Icon 
              name={this.props.iconName} 
              size={20} 
              color={'black'} 
              />
          </Badge>
        </View>
      )
    }
    return (
      <View>
        <Icon 
          name={this.props.iconName} 
          size={20} 
          color={'black'} 
          />
    </View>
    )
  }
}

 

• App.js 에 Tab Icon 추가하기

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <TabIcon iconName='home' visibleBadge />
  <Spacer space={20} />
  <TabIcon iconName='home' />
</View>

 

Tab Icon - Badge