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


# サイドドロワーの解説

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

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

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

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

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

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

今回使用するライブラリは[`@react-navigation/drawer`](https://github.com/react-navigation/react-navigation/tree/main/packages/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';
```

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

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

```
npx pod-install ios
```

### サンプルコード

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

```React
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>

  );

} 
```


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




## エラー解決方法

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

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

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

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

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

```
npm install --save react-native-vector-icons
```
ライブラリをインポート
```React
import Icon from 'react-native-vector-icons/FontAwesome';
```
このように書くことでアイコンを表示させることができます。

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

### 具体例
![ポモドーロタイマー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3990962/b02291c1-08a8-9b1d-6f8d-39824427a3c9.png)


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

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

https://reactnavigation.org/docs/drawer-navigator/