React stack navigation

react stack navigation을 위한 패키지들을 다운받는다.

npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install react-navigation-stack

routes/publicStack.ts

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation'
import SignIn from '../components/public/signIn'
import SignUp from '../components/public/signUp'
const screens = {
    SignIn,
    SignUp
}
const PublicStack = createStackNavigator(screens)
export default createAppContainer(PublicStack)

components/public/publicComponent.ts

import React from 'react';
import Navigator from '../../routes/publicStack'
export default function PublicComponent() {
return (
    <Navigator />
  );
}

이제 버튼을 눌러서 SignUp 페이지로 넘겨보겠습니다

import React from 'react';
import styled from 'styled-components';
const Container = styled.View`
  flex: 1;
 background-color: papayawhip;
 justify-content: center;
 align-items: center;
`;
const Message = styled.Text`
  font-size: 20px;
 font-weight: 500;
 color: palevioletred;
`;
const ButtonToSignUp = styled.Button``
export default function SignIn(props) {
return (
        <Container>
            <Message>
                SignIn 💅
            </Message>
            <ButtonToSignUp onPress={redirectToSignInPage} title="You don't have account yet?" />
        </Container>
    );
function redirectToSignInPage() {
        props.navigation.navigate('SignUp')
    }
}

이제 You don’t have account yet? 버튼을 누르면 SignUp 페이지로 넘어갑니다.

이제 route를 이동하면서 data를 넘겨보도록 하겠습니다.

import React from 'react';
import styled from 'styled-components';
const Container = styled.View`
  flex: 1;
 background-color: papayawhip;
 justify-content: center;
 align-items: center;
`;
const Message = styled.Text`
  font-size: 20px;
 font-weight: 500;
 color: palevioletred;
`;
const ButtonToSignUp = styled.Button``
export default function SignIn(props) {
return (
        <Container>
            <Message>
                SignIn 💅
            </Message>
            <ButtonToSignUp onPress={redirectToSignInPage} title="You don't have account yet?" />
        </Container>
    );
function redirectToSignInPage() {
        props.navigation.navigate('SignUp', { text: "hello!" })
    }
}

그러면 이제 SignUp 페이지에서 해당 데이터를 받아와야겠죠?

SignUp.tsx

import React from 'react';
import styled from 'styled-components';
const Container = styled.View`
  flex: 1;
 background-color: papayawhip;
 justify-content: center;
 align-items: center;
`;
const Message = styled.Text`
  font-size: 20px;
 font-weight: 500;
 color: palevioletred;
`;
export default function SignUp(props) {
const text = props.navigation.getParam('text')
return (
        <Container>
            <Message>
                {text} 💅
        </Message>
        </Container>
    );
}

이번에는 drawer navigation을 만들어보도록 하겠습니다.

yarn add react-navigation-drawer

routes/publicStack.ts

import { createStackNavigator } from 'react-navigation-stack';
import SignIn from '../components/public/signIn'
import SignUp from '../components/public/signUp'
const PublicStack = createStackNavigator({
    SignIn: {
        screen: SignIn,
        navigationOptions: {
            headerShown: false
        }
    },
    SignUp: {
        screen: SignUp,
        navigationOptions: {
            headerStyle: {
                backgroundColor: 'papayawhip',
                shadowOffset: {
                    height: 0,
                }
            },
            headerTintColor: 'palevioletred'
        }
    }
});
export default PublicStack

PublicStack 을 감싸주었던 createAppContainer를 지워준다.

routes/publicDrawer.ts

import { createDrawerNavigator } from 'react-navigation-drawer'
import { createAppContainer } from 'react-navigation'
import PublicStack from './publicStack'
import Developer from '../components/public/developer'
const PublicDrawNavigator = createDrawerNavigator({
    home: {
        screen: PublicStack
    },
    developer: {
        screen: Developer
    }
});
export default createAppContainer(PublicDrawNavigator)

components/public/publicComponent.tsx

import React from 'react';
import Navigator from '../../routes/publicDrawer'
export default function PublicComponent() {
return (
    <Navigator />
  );
}

근데 문제는 drawbar 가 보이지 않는다는 것이다. 하지만 우리의 앱을 좌측에서 우측으로 손가락 터치로 드로우해보면 드로우바가 생긴다.

하지만 유저들은 해당 기능이 있는지 절대 모를것이다. 그래서 유저들을 위해서 해당 드로우바를 열 수 있는 버튼을 만들어주는게 좋다.

우선 header가 없는 Sign In 과 Developer 페이지에서 메뉴 아이콘을 만들어주도록 하자.

SignIn.tsx

import React from 'react';
import styled from 'styled-components';
import { MaterialIcons } from '@expo/vector-icons';
const Container = styled.View`
  flex: 1;
 background-color: papayawhip;
 justify-content: center;
 align-items: center;
`;
const Message = styled.Text`
  font-size: 20px;
 font-weight: 500;
 color: palevioletred;
`;
const ButtonToSignUp = styled.Button``
export default function SignIn(props) {
return (
        <Container>
            <Message>
                SignIn 💅
            </Message>
            <ButtonToSignUp onPress={redirectToSignInPage} title="You don't have account yet?" />
            <MaterialIcons style={{
                position: 'absolute',
                top: 50,
                left: 20
            }} size={32} name="menu"
                onPress={openDrawBar}
            />
        </Container>
    );
function openDrawBar() {
        props.navigation.openDrawer()
    }
function redirectToSignInPage() {
        props.navigation.navigate('SignUp', { text: "hello!" })
    }
}

Developer.tsx

import React from 'react';
import styled from 'styled-components';
import { MaterialIcons } from '@expo/vector-icons';
const Container = styled.View`
  flex: 1;
 background-color: papayawhip;
 justify-content: center;
 align-items: center;
`;
const Message = styled.Text`
  font-size: 20px;
 font-weight: 500;
 color: palevioletred;
`;
export default function Developer(props) {
return (
        <Container>
            <Message>
                developer 💅
        </Message>
            <MaterialIcons style={{
                position: 'absolute',
                top: 50,
                left: 20
            }} size={32} name="menu"
                onPress={openDrawBar}
            />
        </Container>
    );
function openDrawBar() {
        props.navigation.openDrawer()
    }
}