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

12760 ワード
reactnative JavaScript reactnavigation TypeScript JavaScript テキストリンク

完成品

　　

パッケージをインストール

今回は 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で公開しています。
詳しくはこちらをご参照ください。