완제품

패키지 설치

이번에는 React Navigation 의 Drawer Navigation 을 사용하므로 다음 명령으로 설치를 수행합니다.

expo install @react-navigation/drawer @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

햄버거 버튼 만들기

먼저 햄버거 버튼의 구성 요소를 만듭니다.

import React from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { DrawerNavigationProp } from '@react-navigation/drawer';
import { DrawerParamList } from '../types';

type Props = {
    navigation: DrawerNavigationProp<DrawerParamList>;
};

export const DrawerButton: React.FC<Props> = ({ navigation }: Props) => {
    return (
        <TouchableOpacity
            style={styles.hamburgerMenu}
            onPress={() => {
                navigation.openDrawer();
            }}
        >
            {[...Array(3)].map((_, index) => {
                return (
                    <View
                        key={`bar_${index}`}
                        style={styles.hamburgerMenuBar}
                    />
                );
            })}
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    hamburgerMenu: {
        width: 30,
        height: 25,
        position: 'absolute',
        top: 70,
        left: 30
    },
    hamburgerMenuBar: {
        width: 25,
        borderBottomWidth: 3,
        borderColor: '#EDC988',
        marginBottom: 7
    }
});

DrawerNavigation의 openDrawer()라는 메서드를 사용하여 터치하면 Drawer가 열립니다.

햄버거 메뉴는 3개의 선을 세로로 늘어놓는 것으로 만들고 있습니다. [...Array(3)].map((_, index) => {hogehoge} 라는 점에서, 0,1,2를 생성해, 각 아이 컴퍼넌트의 key에 이용하고 있습니다.

【여담】스크린의 병아리의 스니펫 등록

스크린이나 컴퍼넌트의 병아리는 스니펫에 등록해 두면 편리합니다.
자신은 typescriptreact.json
에 다음과 같은 병아리를 등록합니다.

{
  "component": {
    "prefix": "mycomponent",
    "body": [
      "import React from 'react';",
      "import { View, StyleSheet } from 'react-native';",
      "",
      "type Props = {};",
      "",
      "export const Component: React.FC<Props> = ({}: Props) => {",
      "    return <View style={styles.container}></View>;",
      "}",
      "",
      "const styles = StyleSheet.create({",
      "    container: {}",
      "})"
    ],
    "description": "React Native Component with TypeScript"
  },
  "screen": {
    "prefix": "myscreen",
    "body": [
      "import React, { useEffect, useState } from 'react';",
      "import { StyleSheet, SafeAreaView, Text } from 'react-native';",
      "",
      "type Props = {}",
      "",
      "export const Screen: React.FC<Props> = ({}: Props) => {",
      "    useEffect(() => {}, []);",
      "",
      "    return (",
      "       <SafeAreaView style={styles.container}>",
      "            <Text>Screen</Text>",
      "        </SafeAreaView>",
      "    )",
      "};",
      "",
      "const styles = StyleSheet.create({",
      "    container: {",
      "        flex: 1,",
      "        backgroundColor: '#fff',",
      "        alignItems: 'center',",
      "        justifyContent: 'center'",
      "    }",
      "})"
    ],
    "description": "React Native Screen with TypeScript"
  }
}

이렇게 하면 VSCode에서 myscreen 또는 mycomponent를 입력하여 화면이나 구성 요소의 병아리를 만들 수 있습니다.

소스 코드

github 에서 공개하고 있습니다.
자세한 내용은 여기를 참조하십시오.