navigation v5 使い方メモ

概要

NavigationContainerでAppStack.NavigatorとAppStack.Screenをwrapする。

import React from "react";
import {StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from '@react-navigation/stack';

// リストの型指定
export type RootStackParamList = {
  LoginScreen: undefined;
  SignageHomeScreen: undefined
  DisplayDataListScreen: undefined
  FirstScreen: undefined;
  SecondScreen: undefined;
  ThirdScreen: undefined;
  InputTitleScreen:undefined;
};

const AppStack = createStackNavigator<RootStackParamList>();

const App = () => {
  return (
    <NavigationContainer>
      <AppStack.Navigator initialRouteName="LoginScreen">
        <AppStack.Screen name="LoginScreen" component={LoginScreen} />
        <AppStack.Screen name="SignageHomeScreen" component={SignageHomeScreen} />
        <AppStack.Screen name="DisplayDataListScreen" component={DisplayDataListScreen} />
               ・
　　　　　　　　　・
　　　　　　　　　・
　　　　</AppStack.Navigator>
    </NavigationContainer>
  );
}

createDrawerNavigatorと組み合わせる場合

import React from "react";
import {StyleSheet, Text, View } from "react-native";
import { DrawerActions, NavigationContainer } from "@react-navigation/native"; // New!!
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer'; // New!!

// リストの型指定
export type RootStackParamList = {
  LoginScreen: undefined;
  SignageHomeScreen: undefined
  DisplayDataListScreen: undefined
  FirstScreen: undefined;
  SecondScreen: undefined;
  ThirdScreen: undefined;
  InputTitleScreen:undefined;
};

const AppStack = createStackNavigator<RootStackParamList>();
const DrawerMenu = createDrawerNavigator();  //New!!

const App = () => {
  return (
    <NavigationContainer>
      <AppStack.Navigator initialRouteName="LoginScreen">
        <AppStack.Screen name="LoginScreen" component={LoginScreen} />
        <AppStack.Screen name="SignageHomeScreen" component={SignageHomeScreen} />
        <AppStack.Screen name="DisplayDataListScreen" component={DisplayDataListScreen} />
        <AppStack.Screen           // New!!
          name="ConnectScreen"
          component={MakeDrawerMenu}
          options={({ navigation }) => ({
            headerLeft: () => (
              <View> 
              <Button
                  onPress={() => {
                    navigation.dispatch(DrawerActions.toggleDrawer());
                  }}
                />
              </View>
            ),
          })}
        />
               ・
　　　　　　　　　・
　　　　　　　　　・
　　　　</AppStack.Navigator>
    </NavigationContainer>
  );
}

const MakeDrawerMenu = () => {             //New!!
  return (
    <DrawerMenu.Navigator initialRouteName="DevicesList">
      <DrawerMenu.Screen
        name="DevicesList"
        component={ConnectScreen}
        options={{title:"サイネージ一覧"}}/>
      <DrawerMenu.Screen
        name="Notification"
        component={NotificationScreen}
        options={{ title: "お知らせ" }}/>
      <DrawerMenu.Screen
        name="Help"
        component={HelpScreen}
        options={{ title:"ヘルプ" }}/>

    </DrawerMenu.Navigator>
  )
}