ホーム » React Native チュートリアル » React Native Drawer ナビゲーション

React Native Drawer ナビゲーション

概要: このチュートリアルでは、React Navigationライブラリを使用してドロワーナビゲーターを作成する方法を学びます。

React Native Drawer ナビゲーション入門

ドロワーは、画面の左端または右端からスライドインするUI要素です。異なる画面に移動するために選択できるメニュー項目のリストが含まれています。

React Native Drawer

通常、ハンバーガーアイコンなどのボタンをタップするか、スワイプジェスチャでドロワーを開きます。

React Native Drawer Close

ドロワーナビゲーションは、モバイルアプリで一般的なパターンです。ドロワーナビゲーションを設定するには、React Navigationライブラリが提供するドロワーナビゲーターを使用できます。

React Nativeアプリの作成

このセクションでは、ドロワーナビゲーションのセットアップと使用方法について説明します。

要件

始める前に、次のものがあることを確認してください。

  • react-native >= 0.63.0
  • expo >= 41 (Expo Goを使用する場合)

新規プロジェクトのセットアップ

まず、ターミナルを開き、次のコマンドを実行して新しいReact Nativeアプリを作成します。

npx create-expo-app drawer --template blankCode language: JavaScript (javascript)

このコマンドはdrawerディレクトリを作成し、React Nativeアプリの構造を初期化します。

次に、プロジェクトディレクトリdrawerに移動します。

cd drawerCode language: JavaScript (javascript)

次に、次のコマンドを実行してReact Navigationライブラリとその依存関係をインストールします。

npm install @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimatedCode language: JavaScript (javascript)

画面の作成

ステップ1. 画面を格納するためのscreensディレクトリをプロジェクトディレクトリに作成します。

ステップ2. screensディレクトリにHome画面を作成します。

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

const Home = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.screen}>
                <Text>Home Screen</Text>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default Home;Code language: JavaScript (javascript)

ステップ3. screensディレクトリにProfile画面を作成します。

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

const Profile = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.screen}>
                <Text>Profile Screen</Text>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default Profile;Code language: JavaScript (javascript)

ステップ4. screensディレクトリにindex.jsを作成し、HomeとProfile画面をインポートしてすぐにエクスポートします。

import Home from './Home.jsx';
import Profile from './Profile.jsx';

export { Home, Profile }Code language: JavaScript (javascript)

ステップ5. HomeとProfile画面をApp.jsファイルにインポートし、Home画面をメインコンポーネントとして配置します。

import { Home, Profile } from './screens/index';

export default function App() {
  return (
    <Home />
  );
}Code language: JavaScript (javascript)

ステップ6. ターミナルを開いてアプリを実行します。

npm startCode language: JavaScript (javascript)

ドロワーナビゲーションのセットアップ

ステップ1. 次のコードを使用してApp.jsを修正します。

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Home, Profile } from './screens/index';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Profile" component={Profile} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;Code language: JavaScript (javascript)

出力

動作原理

まず、NavigationContainerコンポーネントとcreateDrawerNavigator関数をインポートします。

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';Code language: JavaScript (javascript)

次に、HomeとProfile画面をインポートします。

import { Home, Profile } from './screens/index';Code language: JavaScript (javascript)

次に、createDrawerNavigator()関数を呼び出してドロワーナビゲーターオブジェクトを作成します。

const Drawer = createDrawerNavigator();Code language: JavaScript (javascript)

ドロワーナビゲーターオブジェクト（Drawer）には2つのプロパティがあります。

  • ナビゲーター
  • 画面

4つ目、ドロワーナビゲーションを設定します。

<NavigationContainer>
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen name="Home" component={Home} />
    <Drawer.Screen name="Profile" component={Profile} />
  </Drawer.Navigator>
</NavigationContainer>Code language: JavaScript (javascript)

NavigationContainerコンポーネントは、ナビゲーションツリーと状態を管理します。ナビゲーションを有効にするために、ドロワーナビゲーターをNavigationContainerコンポーネントでラップします。これにより、React Navigationはさまざまな画面間でナビゲーション状態を適切に管理できます。

Drawer.Navigatorコンポーネントは、ドロワーナビゲーターを設定します。画面の開閉や画面間の移動など、ドロワーの状態と動作を管理します。

オプションのinitialRouteNameプロップは、最初にレンダリングされる画面を指定します。initialRouteNameプロップを指定しないと、Drawer.Navigatorはリストの最初の画面を表示します。

Drawer.Screenコンポーネントは、ドロワーからアクセスできる画面を宣言します。

  • nameは、プログラムで参照できるルートの名前を定義します。
  • componentは、画面が選択されたときにレンダリングされるコンポーネントを指定します。この例では、2つの画面に対応する2つのコンポーネントHomeとProfileを指定します。

アプリの起動時、NavigationContainerはナビゲーションコンテキストを初期化し、Drawer.Navigatorはドロワーナビゲーションを設定します。Drawer.Screenコンポーネントで指定されたように、ドロワーに2つの画面を追加します。

ドロワーを開くと、「Home」と「Profile」の2つのオプションが表示されます。

ドロワーナビゲーターコンポーネントでinitialRouteNameとして定義されているため、ドロワーはHome画面を表示します。「Profile」を選択すると、Profile画面がレンダリングされます。

ドロワーのカスタマイズ

アバター、名前、タイトルを含むヘッダーを追加することで、ドロワーをカスタマイズします。さらに、各ナビゲーションアイテムにアイコンを追加します。

React Native Drawer

ステップ1. 次のavatar.pngファイルをダウンロードし、assetsディレクトリにコピーします。

avatar

ステップ2. ドロワーをカスタマイズするために、App.jsファイルを修正します。

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerItemList } from '@react-navigation/drawer';
import Icon from '@expo/vector-icons/MaterialCommunityIcons';
import { Home, Profile } from './screens/index';
import { View, Text, StyleSheet, Image } from 'react-native';


const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Home"
        drawerContent={
          (props) => {
            return (
              <View style={styles.drawer}>
                <View style={styles.drawerHeader}>
                  <Image source={require('./assets/avatar.png')} style={styles.logo} />
                  <Text style={styles.title}>John Smith</Text>
                  <Text style={styles.subtitle}>Developer</Text>
                </View>
                <DrawerItemList  {...props} />
              </View>
            );
          }
        }
        screenOptions={{
          drawerStyle: {
            width: 250
          },
          drawerActiveBackgroundColor: '#eee',
          drawerLabelStyle: {
            color: '#111',
            marginLeft: -20,
          }
        }}

      >
        <Drawer.Screen
          name="Home"
          component={Home}
          options={{
            drawLabel: 'Home',
            title: 'Home',
            drawerIcon: () => <Icon name="home-outline" size={24} color="black" />
          }}
        />
        <Drawer.Screen
          name="Profile"
          component={Profile}
          options={{
            drawLabel: 'Profile',
            title: 'Profile',
            drawerIcon: () => <Icon name="account-outline" size={24} color="black" />
          }} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  drawer: {
    flex: 1,
  },
  drawerHeader: {
    paddingTop: 20,
    width: '100%',
    height: 180,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: '#ddd',
    borderBottomWidth: 1,
    backgroundColor: '#f9dc5c'
  },
  logo: {
    width: 80,
    height: 80,
    borderRadius: 40,
    resizeMode: 'center',
    marginBottom: 10
  },
  title: {
    fontSize: 20,
    color: '#323330',
    fontWeight: 'bold'
  },
  subtitle: {
    fontSize: 14,
    color: '#444'
  }
});

export default App;

Code language: JavaScript (javascript)

動作原理

コンポーネントのリストを次に示します。

  • NavigationContainerコンポーネントはドロワーナビゲーションをラップし、ナビゲーション状態を管理します。
  • Drawer.Navigatorコンポーネントはドロワーナビゲーターを作成します。
  • Drawer.Screenコンポーネントは、ドロワーナビゲーター内の各画面を表します。
  • DrawerItemListコンポーネントは、ドロワーアイテムのリストをレンダリングします。
  • Iconコンポーネントは、@expo/vector-iconsパッケージからアイコンを表示します。

まず、ナビゲーション状態を適切に管理するために、NavigationContainerコンポーネントを使用してドロワーナビゲーションをラップします。

<NavigationContainer>
</NavigationContainer>Code language: JavaScript (javascript)

次に、Drawer.Navigatorコンポーネントで初期ルート名をHome画面に設定し、drawerContentプロップを使用してドロワーコンテンツをカスタマイズします。

<Drawer.Navigator
        initialRouteName="Home"
        drawerContent={/*...*/}>Code language: HTML, XML (xml)

ドロワーコンテンツには、アバター、名前（John Smith）、タイトル（developer）、およびドロワーアイテムのリストが表示されます。DrawerItemListコンポーネントは、drawerContent関数に渡されたプロップに基づいてナビゲーションアイテムをレンダリングします。

次に、screenOptionsプロップを使用してドロワーのプロパティを設定します。

  • drawerStyleプロパティは、ドロワーの幅を250に設定します。
  • drawerActiveBackgroundColorは、アクティブなドロワーアイテムの背景色を薄い灰色（#eee）に設定します。
  • drawerLabelStyle: ドロワーアイテムラベルの色とmarginLeftを設定します。

最後に、ドロワーナビゲーションアイテムの画面を設定します。各画面について、ルート名（name）、レンダリングするコンポーネント（component）、およびラベルとアイコンのオプションを設定します。

  <Drawer.Screen
    name="Home"
    component={Home}
    options={{
      drawLabel: 'Home',
      title: 'Home',
      drawerIcon: () => <Icon name="home-outline" size={24} color="black" />
    }}
  />
  <Drawer.Screen
    name="Profile"
    component={Profile}
    options={{
      drawLabel: 'Profile',
      title: 'Profile',
      drawerIcon: () => <Icon name="account-outline" size={24} color="black" />
    }} />Code language: JavaScript (javascript)

出力

まとめ

  • React Navigationのドロワーナビゲーターを使用して、ドロワーナビゲーションを作成します。
このチュートリアルは役に立ちましたか？
React Native Bottom Tab
前へ
React Native ボトムタブ
次へ
React Native カスタムフォント
React Native Custom Fonts