[React Native] status bar & navigator

 

status bar?

 

 

페이지마다 색을 다르게 설정하거나 투명하게 하는 등 디자인 요소를 추가해 줄 수 있음

https://reactnative.dev/docs/statusbar

StatusBar · React Native

https://docs.expo.dev/versions/latest/sdk/status-bar/

StatusBar - Expo Documentation

 

 

 

 

navigation?

페이지 이동을 위해 사용

네비게이션 바

 

스텍 네비게이션을 사용하여 컴포넌트에 페이지 기능을 부여해주고 컴포넌트에서 컴포넌트로 이동, 즉 페이지 이동을 할 수 있음

React Navigation | React Navigation

React Navigation | React Navigation

 

 

const Stack = createStackNavigator();

const StackNavigator = () =>{
return (
//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언
//위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "black",
borderBottomColor: "black",
shadowColor: "black",
height:100
},
headerTintColor: "#FFFFFF",
headerBackTitleVisible: false
}}
>
{/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣기 - 페이지 이동 가능*/}
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>
</Stack.Navigator>
)
}
export default StackNavigator;

 

React Navigation | React Navigation

React Navigation | React Navigation

https://reactnavigation.org/docs/stack-navigator/

https://reactnavigation.org/docs/stack-navigator/

 

자세한 사용법은 공식문서 참고