React native と Expoの構成でサイドドロワーの実装方法解説

サイドドロワーの解説

サイドドロワーは、多くのアプリケーションやウェブサイトに見られるナビゲーションパターンで、主にモバイルやレスポンシブウェブデザインに利用されます。

特徴としては以下のようなものがあります：
サイドドロワーは通常、画面の左側または右側からスライドインする形式で表示されます。

メニューアイテムやナビゲーションリンクを持ち、ユーザーが他の画面や機能に簡単にアクセスできます。

通常、ハンバーガーアイコンをタップするか、あるいは画面の端からスワイプすることで表示できます。

サイドドロワーが開いている間も、背後のコンテンツはそのままで、ドロワー自体は半透明の背景上に表示されます。

インターフェイスを洗練させ、重要なナビゲーション要素をまとめるのに役立ちますが、ドロワー内のコンテンツが見えないため、ユーザーがドロワーの存在を認識しないというデメリットもあります。

今回使用するライブラリは@react-navigation/drawerです。

npm install @react-navigation/drawer

次に、ドロワー ナビゲータに必要なライブラリをインストールして構成する必要があります。Expo用です。

npx expo install react-native-gesture-handler react-native-reanimated

2 つのファイルを作成

gesture-handler.native.js

// Only import react-native-gesture-handler on native platforms
import 'react-native-gesture-handler';

gesture-handler.js

// Don't import react-native-gesture-handler on web

index.jsやApp.jsなどのエントリーファイルの先頭に次のコードを追加します。

import './gesture-handler';

Android または iOS 用にビルドする場合は、この手順をスキップしないでください。スキップすると、開発環境では正常に動作しても、本番環境ではアプリがクラッシュする可能性があります。これは他のプラットフォームには適用されません。

Mac で iOS 向けに開発している場合は、リンクを完了するためにポッド ( Cocoapods経由) もインストールする必要があります。

npx pod-install ios

サンプルコード

このサンプルコード動きません。エラーを吐きます

import * as React from 'react';

import { Text, View } from 'react-native';

import { NavigationContainer, useNavigation } from '@react-navigation/native';

import { Button } from '@react-navigation/elements';

import { createDrawerNavigator } from '@react-navigation/drawer';

  

const Drawer = createDrawerNavigator();

  

function MyDrawer() {

  return (

    <Drawer.Navigator>

      <Drawer.Screen name="Home" component={HomeScreen} />

      <Drawer.Screen name="Profile" component={ProfileScreen} />

    </Drawer.Navigator>

  );

}

  

function HomeScreen() {

  const navigation = useNavigation();

  

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>Home Screen</Text>

      <Button onPress={() => navigation.navigate('Profile')}>

        Go to Profile

      </Button>

    </View>

  );

}

  

function ProfileScreen() {

  const navigation = useNavigation();

  

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>Profile Screen</Text>

      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>

    </View>

  );

}

  

export default function App() {

  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>

  );

} 

このサンプルコード動きません。エラーを吐きます

エラー解決方法

export default function App() {  
    return (  
        <NavigationIndependentTree>        
	        <NavigationContainer>  
	            <MyDrawer />  
	        </NavigationContainer>  
        </NavigationIndependentTree>  
    );  
}

NavigationContainerをNavigationIndependentTreeでラップしてやるとちゃんと動いてエラーも解消されます。

まだアプリ開発途中なのでビルドしたときにちゃんと動作するかどうかはまだ確認が取れていません。上手く動作確認が取れた時には記事に追記を行いたいと思います。

サイドドロワーにアイコンを追加する方法

まずはreact-native-vector-iconsをインストール

npm install --save react-native-vector-icons

ライブラリをインポート

import Icon from 'react-native-vector-icons/FontAwesome';

このように書くことでアイコンを表示させることができます。

     <Drawer.Navigator>
        <Drawer.Screen
            name="ポモドーロタイマー"
            component={PomodoroApp}
            options={{ drawerIcon: () => <Icon name="clock-o" size={24} /> }}
        />
    </Drawer.Navigator>

具体例

これにて本記事を終了させて頂きます。お疲れ様でした。

公式サイト　この記事の大元のページ　より詳しい情報が欲しい方はこちらへ是非