[React Native] Navigation Option no Header 헤더 없애기, 제거

React Native Navigation Option no HeaderBar 헤더 없애기, 제거

React Native 앱 개발을 하시다가 상단의 HeaderBar를 제거하는 방법을 알려드리겠습니다.

실행환경은 MacBook Pro M1 이며, Visual Studio Code를 사용하였습니다.

React Native Functional Component Hooks 방식으로 코딩하였습니다.

 

처음에 React Navigation을 이용하시면 기본으로 화면 이름이 HeaderBar에 타이틀로 생성이 됩니다.

 

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import Main from './screens/Main';

const Stack = createStackNavigator();

const App = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Main" component={Main}/>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

Main.js

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

const Main = ({ navigation }) => {

    return(
        <View style={styles.container}>
            <Text> Main Screen </Text>
        </View>
    )
}

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

export default Main;

실행화면

 

이제 HeaderBar를 제거하겠습니다.

 

방법1 : Stack.Navigator에 screenOptions = {{ headerShown: false }} 추가

// export { default } from '../storybook'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import Main from './screens/Main';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{ headerShown: false }}
            >
                <Stack.Screen name="Main" component={Main} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

방법2 : Stack.Screen 에 options={{ headerShown: false }} 추가

// export { default } from '../storybook'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import Main from './screens/Main';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    options={{ headerShown: false }}
                    name="Main" component={Main} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

 

방법1은 Stack Navigator에 등록된 모든 스크린에 HeaderBar를 제거해줍니다.

방법2는 해당 Stack Screen에서만 HeaderBar를 제거해줍니다.