react-native 0.64.0 화면간 이동

react-native를 개발 할 때 항상 느끼는거지만 버전에 따른 개발이 달라져서 힘들었습니다.
반드시 버전을 확인해서 개발에 적용하시길 바랍니다.

 

• 모듈 버전

react-native : 0.64.0 @react-navigation/native : ^5.9.4 @react-navigation/stack : ^5.14.4 react-native-gesture-handler : ^1.10.3 react-native-safe-area-context : ^3.2.0 react-native-screens : ^3.0.0

 

• 모듈 설치

npm install @react-navigation/native npm install @react-navigation/stack npm install react-native-safe-area-context npm install react-native-gesture-handler npm install react-native-screens

 

1. StackNavigator에 화면을 정의합니다.

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import MainScreen from './MainScreen';
import DetailScreen from './DetailScreen';

const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="MAIN">
        <Stack.Screen name="MAIN" component={MainScreen}
          options={{
            title: '메인화면'
        }}/>
        <Stack.Screen name="DETAIL" component={DetailScreen} 
          options={{
            title: '상세화면'
        }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

 

2. 첫번째 화면(MainScreen.js)을 구성합니다.

//MainScreen.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class MainScreen extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize:30}}>Main Screen</Text>
        <Button onPress={() => this.goMainScreen()} title='Go Detail Screen'/>
      </View>
    );
  }

  goMainScreen(){
    // DetailScreen으로 화면 이동
    this.props.navigation.navigate('DETAIL');
  }
}

 

 

3. 두번째 화면(DetailScreen.js)을 구성합니다.

// DetailScreen.js
import React, { Component } from 'react';
import { View, Text, } from 'react-native';

export default class DetailScreen extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize:30}}>Detail Screen</Text>
      </View>
    );
  }
}