[React-Native] Drawer Navigation Custom 하기

 

2022.10.25 - [Android/React-Native] - [React-Native] Drawer Navigation

[React-Native] Drawer Navigation

 

Drawer Navigation을 만드는 건 이전 글을 참고해주세요!

 

Drawer를 커스텀하는 것은 간단하다. 우선 원하는 디자인대로 코드를 짠다.

Drawer에 있는 버튼을 누르면 해당 화면으로 이동해야 하니 navigation을 추가해줬다.

const CustomDrawer = () => {
  const navigation = useNavigation();

  return (
    <SafeAreaView style={{ flexDirection: 'row', marginTop: 80 }}>
      <TouchableOpacity style={styles.container} onPress={() => navigation.navigate('Home')}>
        <Text>
          홈
        </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.container} onPress={() => navigation.navigate('Settings')}>
        <Text>
          설정
        </Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

 

 

그리고 Drawer.Navigator에 아래처럼 추가해주면 된다.

 

<Drawer.Navigator drawerContent={() => <CustomDrawer />}

 

실행화면

 

전체 코드

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { StyleSheet, TouchableOpacity, Text, SafeAreaView } from 'react-native';

import Home from './src/Home';
import Settings from './src/Settings';

const CustomDrawer = () => {
  const navigation = useNavigation();

  return (
    <SafeAreaView style={{ flexDirection: 'row', marginTop: 80 }}>
      <TouchableOpacity style={styles.container} onPress={() => navigation.navigate('Home')}>
        <Text>
          홈
        </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.container} onPress={() => navigation.navigate('Settings')}>
        <Text>
          설정
        </Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

const App = () => {
  const Drawer = createDrawerNavigator();

  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContent={() => <CustomDrawer />}
        initialRouteName="Home">
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Settings" component={Settings} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: '#999',
    borderWidth: 1,
    paddingVertical: 30,
    borderRadius: 10,
    marginHorizontal: 2
  }
})

export default App;