React Native でハンバーガーメニューを作る！

# 完成品
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/2ef5c09f-e042-4ce8-45dc-0ccf0e79f03b.png" width="200" />　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/b5b886b4-8b20-9103-f13b-7e63bc10bc6a.png" width="200"/>

# パッケージをインストール
今回は [React Navigation](https://reactnavigation.org/) の [Drawer Navigation](https://reactnavigation.org/docs/drawer-based-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
```

# ハンバーガーボタンの作成
まずハンバーガーボタンのコンポーネントを作成します。

```tsx
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に利用しています。

<details><summary>【余談】スクリーンの雛形のスニペット登録</summary><div>

スクリーンや、コンポーネントの雛形はスニペットに登録しておくと便利です。
自分は`typescriptreact.json
`に、以下のような雛形を登録しています。

```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`と入力すると、スクリーンやコンポーネントの雛形が作成できます。

</div></details>

# ソースコード
[github](https://github.com/ShintaroaSuzuki/qiita_hamburger_menu)で公開しています。
詳しくはこちらをご参照ください。