[react-native] createStackNavigator

먼저 navigation을 테스트하기 위해 RN 프로젝트를 하나 생성해준다.

react-native init navigation_test

그 후에 navigation을 설치해준다

npm install @react-navigation/native

npm install @react-navigation/native-stack

App.js는 라우팅하는 역활을 하고 나머지 컴포넌트는 따로 불러와서 작성하려고한다.

root_folder

-src

 -Screen

  -homeScreen.js

  -stackScreen.js

루트 폴더 아래에 다음과 같이  2개의 폴더와 2개의 js 파일을 생성한다.

App.js

import * as React from 'react';
import {Button, View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import stackScreen from './src/Screen/stackScreen';
import homeScreen from './src/Screen/homeScreen';



const Stack = createStackNavigator();

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName="Home"
               >
                <Stack.Screen name="Home" component={homeScreen}/>
                <Stack.Screen name="Details" component={stackScreen}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

/src/Screen/homeScreen.js

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

function HomeScreen({navigation}) {
    return (
        <View style={styles.container}>
            <Text>Home Screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}

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


export default HomeScreen

/src/Screen/stackScreen.js

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

function DetailsScreen() {
    return (
        <View style={styles.container}>
            <Text>Details Screen</Text>
        </View>
    );
}

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


export  default DetailsScreen

그 후에 앱을 실행하면 다음과 같은 화면이 나오는것을 알 수 있다.

 

만약 header부분을 없애고 싶으면 App.js의 Navigator에 옵션을 넣어주면 간단하게 수정이 가능하다.

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName="Home"
                screenOptions={{
                    headerShown: false,
                }}>
                <Stack.Screen name="Home" component={homeScreen}/>
                <Stack.Screen name="Details" component={stackScreen}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}