[React Native] Navigation으로 화면 이동 구현하기

React Native에서 라이브러리를 적용하기 위해 NavigationContainer 컴포넌트를 불러와서 앱 전체를 감싸주어야 한다.

<NavigationContainer>
	<Stack.Navigator initialRouteName="Home">
		<Stack.Screen name="Home" component={HomeScreen} />
		<Stack.Screen name="Detail" component={DetailScreen} />
	</Stack.Navigator>
</NavigationContainer>

 

네이티브 스택 내비게이터

화면 전용 컴포넌트 screens 디렉터리를 하나 만들고 그 안에 파일들을 저장한다. 만드는 이유는 ? 화면 전용 컴포넌트를 모아서 관리할 수 있기 때문에 편리함! 

간단하게 HomeScreen이랑 DetailScreen 만들었다.

 

HomeScreen.js

import React from 'react';
import {View, Button} from 'react-native';

function HomeScreen({navigation}) {
    return (
        <View>
            <Button
                title="Detail 열기"
                onPress={() => navigation.navigate('Detail')}
            />
        </View>
    );
};

export default HomeScreen;

 

DetailScreen.js

import React from 'react';
import {View, Text} from 'react-native';

function DetailScreen() {
    return (
        <View>
            <Text>Detail</Text>
        </View>
    );
};

export default DetailScreen;

 

스크린으로 사용된 컴포넌트는 navigation이라는 객체를 Props로 받아올 수 있다. 이 객체를 사용해서 다음과 같이 다른 화면으로 이동할 수 있다.

navigation.navigate('Detail')

 

그런데 알 수 없는 에러를 만났다..

 

내가 생각한 원인은 

import {createNativeStackNavigator} from "react-native-screens/native-stack";

 

이거 때문인데... 그렇다고 뒤에 "react-native-screens/native"으로 고치면 위에 적은 코드로 고치라고 에러 뜨고.. 어떻게 해야할지 모르겠다.. ㅠㅠ

그치만 처음에만 에러 뜨고 뒤엔 작동이 잘 돼서 별 문제 없을 것 같다는 판단으로 일단 넘겼다..! ㅎㅎ