[React Native] React Navigation - Stack Navigation

React Native React Navigation - Stack Navigation

 

React Native 앱 개발에서 필수라고 할 수 있는 React Navigation 화면 전환 기능을 사용해 보겠습니다.

React Navigation 아래 여러 종류의 Navigation이 있는데, 그 중 Stack Navigation입니다.

 

React Navigation 설치

npm install @react-navigation/native

React Native 프로젝트 폴더 터미널에서 위와 같이 입력을 해주시고요

 

Dependencies도 같이 설치 해주셔야 합니다.

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

이제 cd ios && pod install && cd .. 을 입력해주시고요

 

entry file을 index.js에 추가 해주셔야 합니다.

import ‘react-native-gesture-handler’;

저는 추가 없이도 사용하고 있는데, 이 부분은 사실 잘 모르겠습니다...

 

이제 Stack Navigation을 설치 하겠습니다.

npm install @react-navigation/stack
cd ios && pod install && cd ..

 

이제 설치는 완료되었고, 테스트를 진행하겠습니다.

 

App.js

// export { default } from '../storybook'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import Main from './screens/Main';


const Stack = createStackNavigator();

const App = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Main" component={Main}/>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

저는 screen 폴더를 따로 만들어 거기에 Main 페이지를 만들어 주었습니다.

사용하실 화면들은 Stack.Screen에 등록을 해주셔야 사용이 가능합니다.

 

Main.js

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

const Main = ({ navigation }) => {

    return(
        <View style={styles.container}>
            <Text> hello world </Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})

export default Main;

이렇게만 해주시면 화면(Screen)이 등록 되신것을 확인 하실 수 있습니다.