[RN]Hide header in stack navigator React navigation

RN=React Native

 

요렇게 치면 나옵니다.

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

 

해결법

Hide header in stack navigator React navigation

React Navigation 홈페이지 관련 링크

 

 

https://reactnavigation.org/docs/headers/

 

 

App.js에 넣으면 됩니다.

 

이는 App.js에 관련 페이지 링크를 넣어두고 그것을 감싸는 

 <NavigationContainer> 컴포넌트 속성에 넣으면 됩니다.

그리고 위에

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "./Home";
import Login from "./Login";
const Stack = createStackNavigator();

처음에 React Navigation을 인스톨 하고 저 문장들을 작성하면 저 문장만 반투명으로 바뀌어서 누가봐도
적용이 안된 모습을 하는데
그건 코드가 잘못된게 아니고 아래 페이지 관련 기능을 선언을 안해서 그런겁니다.

 

(뭔가 오류인것 같아서 해결하려 했으나 오류가 아니었음...)

+오류는 애초에 에러라고 착하게 알려주니 다른건 신경 안써도 괜찮아 보입니다.

export default function App() {
  
  return (
    <NavigationContainer   screenOptions={{headerShown: false}}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

요것처럼 기능을 선언하면 완료 됩니다.