react-native - 5 Stack Navigator

react Navigator

화면 전환

https://reactnavigation.org/docs/getting-started
=> docs

설치

npm install @react-navigation/native

dependencies 설치

npm install react-native-screens react-native-safe-area-context

• yarn/npm에 따라서 설치해준다.

ios 폴더로 가서 pod install
Podfile.lock에서 기록한 lib들에 대해서는 지정된 버전만 다운로드

pod install

Stack Navigator
기본 화면 전환

npm install @react-navigation/native-stack

App.js

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/HomeScreen';
import SubScreen from './src/SubScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Sub" component={SubScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

createNativeStackNavigator
Navigator, Screen 2개의 프로퍼티를 리턴한다.

HomeScreen.js

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


class HomeScreen extends Component {
  render() {
    return (
      <View style={{flex: 1, alignContent: 'center', justifyContent: 'center'}}>
          <Text>Home</Text>
          <Button 
            title="서브 페이지로 이동"
            onPress={()=>{
                this.props.navigation.navigate('SubScreen')
            }}
          />
      </View>
    )
  }

}


export default HomeScreen;

SubScreen.js

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



class SubScreen extends Component {
  render() {
    return (
      <View style={{flex: 1, alignContent: 'center', justifyContent: 'center'}}>
          <Text>Sub page</Text>
          <Button 
            title="홈으로 이동"
            onPress={()=>{
                this.props.navigation.navigate('Home')
            }}
          />
      </View>
    )
  }

}

export default SubScreen;

this.props.navigation.navigate('SubScreen')

App.js에서 Stack.Screen이라는 프로퍼티를 리턴할때 스크린 컴포넌트를(component={ScreenComponent}) 명시해준다. 이때, navigation props를 명시한 컴포넌트에 넘겨주게된다. 따라서 해당 컴포넌트 안에서 navigation props를 사용할 수 있다. navigation props의 navigate() 함수 사용한다는 것을 의미한다.