React Navigation 5 Tutorials

サイドバーの作成

React Navigation Drawer navigation

ダウンロード

npm install @react-navigation/drawer

インポート

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

Drawerの追加

const Drawer = createDrawerNavigator();

コードの追加

注記スタック部分とDrawerコードの挿入

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

      {/* <Stack.Navigator screenOptions={{
          headerStyle:{
            backgroundColor: '#009387',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        }
      }}>
        <Stack.Screen name="Home" component={HomeScreen} options={{
          title : 'Overview'
        }}/>
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator> */}
    </NavigationContainer>
  );
}

結果の表示