9.3.1 탭 중앙에 버튼 만들기

먼저 MainTab 탭 중앙에 카메라 아이콘이 있는 원형 버튼을 만들어봅시다.

▲ 그림 9-2 카메라 버튼 만들기

CameraButton 컴포넌트를 만들어서 이렇게 탭 버튼 사이에 커스텀 버튼을 보여주겠습니다. 버튼의 위치는 position: absolute로 좌표를 직접 지정하겠습니다. 그리고 이 컴포넌트를 MainTab에서 보여줄게요.

components 디렉터리에 CameraButton 컴포넌트를 만들어주세요.

components/CameraButton.js

import React from 'react';
import {View, Pressable, StyleSheet, Platform} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialIcons';

const TABBAR_HEIGHT = 49;

function CameraButton() {
  const insets = useSafeAreaInsets();

  const bottom = Platform.select({
    android: TABBAR_HEIGHT / 2,
    ios: TABBAR_HEIGHT / 2 + insets.bottom - 4,
  });

  return (
    <View style={[styles.wrapper, {bottom}]}>
      <Pressable
        android_ripple={{
          color: '#ffffff',
        }}
        style={styles.circle}>
        <Icon name="camera-alt" color="white" size={24} />
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    zIndex: 5,
    borderRadius: 27,
    height: 54,
    width: 54,
    position: 'absolute',
    left: '50%',
    transform: [
      {
        translateX: -27,
      },
    ],
    ...Platform.select({
      ios: {
        shadowColor: '#4d4d4d',
        shadowOffset: {width: 0, height: 4},
        shadowOpacity: 0.3,
        shadowRadius: 4,
      },
      android: {
        elevation: 5,
        overflow: 'hidden',
      },
    }),
  },
  circle: {
    backgroundColor: '#6200ee',
    borderRadius: 27,
    height: 54,
    width: 54,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default CameraButton;