Expo Android App 만들기 - 7 (React Navigation)

2023.06.11 - [IT] - Expo Android App 만들기 - 6 (하단배너고정, 상태바)

Expo Android App 만들기 - 6 (하단배너고정, 상태바)

컨텐츠 영역과 하단 배너 영역도 나눴으니 이제는 화면 이동에 쓰이는 React Navigation을 적용해보았다.

yarn add @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

yarn add @react-navigation/stack

npx expo install react-native-gesture-handler

패키지 설치 후 App.js에 react-native-gesture-handler를 import 해준다.

import 'react-native-gesture-handler'

그 다음 소스에 navigator를 적용했으나 에러가 나는 것이였다..
알고보니 android 를 재빌드를 해줬어야 했다.
패키지 설정과 import가 끝나면 yarn android 를 한 번 해준다.

// App.js
import 'react-native-gesture-handler'
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import Intro from './Intro'
import Draw from './Draw'

const Stack = createStackNavigator()

const Main = () => {
	return(
    	<NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name={'Intro'} component={Intro}/>
            <Stack.Screen name={'Draw'} component={Draw}/>
          </Stack.Navigator>
        </NavigationContainer>
    )
}
export default Main

stack navigator 에 맨처음 화면인 Intro와 버튼을 누르면 이동할 Draw 페이지를 추가해줬다.

// Intro.js
import {View} from 'react-native'
import {Button, Text} from 'react-native-paper'

const Intro = ({navigation}) => {
    return (<>
        <View
            style={{
                flex:1,
                backgroundColor:'white'
            }}
        >
            <Text>Intro 입니다.</Text>
            <Button
                mode={'contained'}
                onPress={()=>navigation.navigate('Draw')}
            >
                이동
            </Button>
        </View>
    </>)
}
export default Intro

// Draw.js
import {View} from 'react-native'
import {Text} from 'react-native-paper'

const Draw = ({navigation})=>{
    return (<>
        <View
            style={{
                flex:1,
                backgroundColor:'white'
            }}
        >
            <Text>Draw 입니다.</Text>
        </View>
    </>)
}
export default Draw

앱을 실행시켜보면 

Intro에서 이동 버튼 이벤트에 navigation.navigate('screenName') 을 해주면
해당하는 스크린으로 페이지가 이동된다. 그리고 상단 화살표를 누르면 이전 페이지로 이동이 된다.

페이지 이동시 파라미터를 보내보자.

// Intro.js
<Button
    mode={'contained'}
    onPress={()=>{
        navigation.navigate('Draw',{
            p1: 'Value'
        })
    }}
>

Intro에서 버튼을 누르면 p1 이라는 key에 'value' 값을 같이 전달하게 구성하였다.

// Draw.js
const Draw = ({navigation, route})=>{
    console.log(route)
    
    ...

Draw 페이지에서 route 를 console에 찍어보면

route 안에 params로 이전 페이지에서 전달한 파라미터가 들어가 있는걸 확인할 수 있다.

const {params} = route
...
<Text>param 값은 {params.p1}입니다.</Text>

앱을 확인해보면 

잘 전달 받을 걸 확인할 수 있다.

추가로 위에 title이 보여지는게 싫다면 

<Stack.Screen
    name={'Intro'}
    component={Intro}
    options={{
        headerShown:false
    }}/>

headerShown 을 false로 주면 사라진다.