React Native でいろんなメニューを持ったアプリを作る

最終形

• タブメニューで画面が切り替わる
• どの画面からでもアクセスできるスライドタイプのメニューを持つ
• イベントトリガーでポップアップ画面が差し込まれる

以下の動画のようになります。

このような複数の画面パターンを持ったアプリを実装していきます。

ナビゲーターの構成

今回の実装では、 React Navigation を使っています。
バージョンは v5 です。

スライドメニュー（Drawer）、ポップアップ画面はタブメニューに覆いかぶさる形で実装したいので、
DrawerNavigator > StackNavigator > TabNavigator となる構成で実装します。

それぞれの中身を見ていきます。

DrawerNavigator

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      drawerContent={() => (
        <View style={styles.container}>
          <Text>Drawer</Text>
        </View>
      )}
    >
      <Drawer.Screen name="StackNavigator" component={StackNavigator} />
    </Drawer.Navigator>
  );
};

スクリーンは１つのみの定義で、StackNavigatorを呼び出しています。
これにより、自動的にStackNavigatorの内容が表示されます。

Drawer の表示内容は、drawerContentに定義します。

StackNavigator

const StackNavigator = () => {
  const navigation = useNavigation();
  return (
    <Stack.Navigator mode="modal" headerMode="screen">
      <Stack.Screen
        name="TabNavigator"
        component={TabNavigator}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="ModalScreen"
        component={ModalScreen}
        options={{
          headerLeft: () => (
            <HeaderBackButton
              labelVisible={false}
              backImage={() => (
                <View style={{ paddingHorizontal: 8 }}>
                  <Icon name="md-close" style={{ fontSize: 18 }} />
                </View>
              )}
              onPress={() => navigation.goBack()}
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
};

TabNavigatorとポップアップ画面を定義しています。
mode="modal"の場合は下から浮き上がる形で、mode="card"の場合は右から押し出すように画面が挿入されます。

TabNavigatorと同階層にModalScreenを配置することで、ポップアップ画面がタブに隠れないようにしています。

TabNavigator

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={TabScreen1} />
      <Tab.Screen name="Tab2" component={TabScreen2} />
      <Tab.Screen name="Tab3" component={TabScreen3} />
    </Tab.Navigator>
  );
};

アプリからの呼び出し

const App: React.FunctionComponent = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
};

NavigationContainerの子要素として、DrawerNavigatorを呼び出します。
これで完成です。

おわりに

React Navigation では、どちらの Navigator を上位にするかで挙動が異なります。

今回紹介したように、覆いかぶさるポップアップ画面も実装できますし、一方で選択タブ内で詳細画面などの別画面を表示することも可能です。（その場合はタブメニューが隠れない）

どのような画面構成にしたいかを設計し、どのページをどのナビゲーターに配置するかを考える必要があります。

今回は、簡単ではありますがその実装方法について紹介しました。
不明点や間違いなどがありましたらコメントお願いします。

ここまで読んでいただき、ありがとうございました。