[expo] 6. expo로 앱 만들기 - 화면 간 이동 navigation - 3

안녕하세요 프시케입니다.

 

이번 포스팅은 저번 포스팅에 이어 화면을 정리하는 포스팅을 하도록 하겠습니다.

 

Screen1 부터 Screen6 까지 화면의 Header 부분을 수정하도록 하겠습니다. 

 

Header 부분 수정은 Navigation.js 파일에서 합니다.

 

먼저 Stack으로 이동되는 Header를 제거 해줍니다.

 

 

 

 

해당 소스입니다.

 

function StackScreen() {

  return (

    <Stack.Navigator

      initialRouteName="Splash"

    >

      <Stack.Screen name="Splash" component={Splash} options={{headerShown: false}}/>

      <Stack.Screen name="Signin" component={Signin} options={{headerShown: false}}/>

      <Stack.Screen name="KaKaoLogin" component={KaKaoLogin} options={{headerShown: false}}/>

      <Stack.Screen name="Signup" component={Signup} options={{headerShown: false}}/>

      <Stack.Screen name="Home" component={BottomStack} options={{headerShown: false}}/>

    </Stack.Navigator>

  );

}

 

 

 

수정된 화면입니다. 

 

 

 

 

 

다음으로 Bottom-tap navigation으로 생성된 Header를 제거와 아이콘을 넣어줍니다.

 

 

 

 

해당 소스입니다.

 

function BottomStack() {

  return (

    <BottomTab.Navigator>

      <BottomTab.Screen

        name="Top1"

        component={Top1}

        options={{

          headerShown: false,

          tabBarIcon: ({ color, size }) => (

            <MaterialCommunityIcons name="home" color={color} size={30} />

          ),

        }}

      />

      <BottomTab.Screen

        name="Bottom"

        component={Screen3}

        options={{

          headerShown: false,

          tabBarIcon: ({ color, size }) => (

            <MaterialCommunityIcons name="chat-alert" color={color} size={30} />

          ),

        }}

      />

      <BottomTab.Screen

        name="Top2"

        component={Top2}

        options={{

          headerShown: false,

          tabBarIcon: ({ color, size }) => (

            <MaterialCommunityIcons name="brightness-5" color={color} size={30} />

          ),

        }}

      />

    </BottomTab.Navigator>

  );

}

 

 

 

해당 소스로 만들어진 화면들입니다.

 

 

화면을 자세히 보면 Top-Tab의 위치가 이상한듯 보입니다. 

 

하지만 apk 파일을 만들어 확인해보면 화면은 잘 나오는것 같습니다.

 

추후 문제가 발생할 경우 다시 포스팅하겠습니다. 

 

 

 

 

이번 포스팅은 여기서 마치겠습니다.