Navigation(Stack, Bottom, nav간 이동)

들어가기
reactNative의 화면이동의 기본이 되는 reactNavigation을 설명함.
login됬을떄의 navigation과 logOut됬을때의 navigation을 두개로 나누어 만듬.
문법이 언제 바뀔지 모르니 항상 공식문서를 참조할 것

https://reactnavigation.org/docs/getting-started/

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context

1. stack Navigation

https://reactnavigation.org/docs/stack-navigator
-공식문서에 screenOptions가 잘 나와있음.

npm install @react-navigation/stack
expo install react-native-gesture-handler

1. navigators/LoggedOutNav.js

import { createStackNavigator } from '@react-navigation/stack' //1번 createStack~ import한다.
import React from 'react'
import CreateAccount from '../screens/CreateAccount'
import Login from '../screens/Login'
import Welcome from '../screens/Welcome'

const Stack = createStackNavigator()  ///2. Stack을 만든다.

export default function LoggedOutNav() {
  return (
    <Stack.Navigator   ///3. Stack.Navigator만든다. screenOptions는 공식문서참고
                       ///모든 page에 다 적용되는 options임.
      screenOptions={{
        headerBackTitleVisible: false,
        headerTitle: false,
        headerTransparent: true,
        headerTintColor: 'white',
      }}
    >
      <Stack.Screen         ///4 Stack에 들어갈 screen을 설정.
                             ///name, options, component를 설정해 준다.
                             /// options역시 공식 문서를 참고하자~
        name="Welcome"
        options={{
          headerShown: false,
        }}
        component={Welcome}
      />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="CreateAccount" component={CreateAccount} />
    </Stack.Navigator>
  )
}

2. bottom-tab Navigation

https://reactnavigation.org/docs/bottom-tab-navigator
공식문서

npm install @react-navigation/bottom-tabs

stackNavigation과 별로 다를 게 없음.
screenOptions와 options는 공식문서를 참고하여 try해 볼것.

2. navigators/LoggedInNav.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import React from 'react'
import Feed from '../screens/Feed';

const Tabs = createBottomTabNavigator();

export default function LoggedInNav(){
    return(
        <Tabs.Navigator>
            <Tabs.Screen name='Feed' component={Feed} />
        </Tabs.Navigator>
    )
}

3. App.js에 적용

import { NavigationContainer } from '@react-navigation/native'
.
.
.

return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        {isLoggedIn ? <LoggedInNav /> : <LoggedOutNav />}
      </NavigationContainer>
    </ApolloProvider>
  )

App.js에
NavigationContainer를 import한 다음에,
LoggedInNav와 LoggedOutNav를 NavgitionContainer로 감싼다.

4. Screen간에 이동.

import React from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import styled from 'styled-components/native'
import AuthButton from '../components/auth/AuthButton'
import AuthLayout from '../components/auth/AuthLayout'

const LoginLink = styled.Text`
  color: blue;
  font-weight: 600;
  margin-top: 20px;
`

export default function Welcome({ navigation }) {
  const goToCreateAccount = () => navigation.navigate('CreateAccount')
  const goToLogin = () => navigation.navigate('Login')
  ///함수 시작되는 부분에서 navigation을 props로 받아서 navigation.navigate(이동할려는  component로 만든다.
  
  return (
    <AuthLayout>
      <AuthButton
        text="CreateAccount"
        disabled={false}
        onPress={goToCreateAccount}
      />
      <TouchableOpacity onPress={goToLogin}>
        <LoginLink>Log In</LoginLink>
      </TouchableOpacity>
    </AuthLayout>
  )
}