본문 바로가기
React-Native

React-Native 화면(Screen)간 이동하기

by Dokon Jang 2018. 8. 30.
반응형
react-native version : 0.55.4

 

React-Native에서 Screen간 이동을 하려면 react-native-navigation 모듈이 필요합니다.

 

그리고 기본적으로 사용하는 Navigator는 아래와 같습니다.

 

(1) StackNavigator : Screen, TabNavigator간 이동을 하기 위해 사용.

 

(2) TabNavigator : 여러 Screen을 하나의 Tab으로 구성하기 위해 사용.

 

아래의 명령으로 react-native-navigation 모듈을 프로젝트에 설치 후 사용하면 됩니다.

 npm install --save react-navigation

 

 

StackNavigator 예제

// App.js
import {StackNavigator} from 'react-navigation'
import MainScreen from './MainScreen'
import Sub1Screen from './Sub1Screen'
import Sub2Screen from './Sub2Screen'

const App = StackNavigator({
  Main : {
    screen : MainScreen,
    navigationOptions: {
      title: 'Main',
    }
  },
  Sub1 : {
    screen : Sub1Screen,
    navigationOptions: {
      title: 'Sub1',
    }
  },
  Sub2 : {
    screen : Sub2Screen,
    navigationOptions: {
      title: 'Sub2',
    }
  },
});
export default App;
 

 

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

export default class MainScreen extends Component {
  render() {
    return (
      <View>
        <Text>Main</Text>
        <Button onPress={() => this.goSub1Screen()} title='Go Sub1 Screen'/>
        <Button onPress={() => this.goSub2Screen()} title='Go Sub2 Screen'/>
      </View>
    );
  }

  goSub1Screen(){
    this.props.navigation.navigate('Sub1');
  }

  goSub2Screen(){
    this.props.navigation.navigate('Sub2');
  }
}
 

 

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

export default class Sub1Screen extends Component {
  state ={
     idValue:this.props.navigation.state.params.id,
     nameValue:this.props.navigation.state.params.name
  }
  render() {
    return (
      <View>
        <Text>ID</Text>
        <Text></Text>
        <Text>Name</Text>
        <Text></Text>
      </View>
    );
  }
}

 

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

export default class Sub2Screen extends Component {
  render() {
    return (
      <View>
        <Text>Sub2</Text>
      </View>
    );
  }
}

 

TabNavigator 예제

 
//TabNav.js
import {TabNavigator} from 'react-navigation'
import Tab1Screen from './Tab1Screen';
import Tab2Screen from './Tab2Screen';

const Tab = TabNavigator({
  Tab1 : ,
  Tab2 : ,
});
export default Tab;
//Tab1Screen.js

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

export default class Tab1Screen extends Component {
  render() {
    return (
      <View>
        <Text>Tab 1</Text>
      </View>
    );
  }
}​
//Tab2Screen.js

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

export default class Tab2Screen extends Component {
  render() {
    return (
      <View>
        <Text>Tab 2</Text>
      </View>
    );
  }
}​

 

 

StackNavigator과 TabNavigator 조합 예제

// App.js
import {StackNavigator} from 'react-navigation'
import MainScreen from './MainScreen'
import Sub1Screen from './Sub1Screen'
import Sub2Screen from './Sub2Screen'
import Tab from './TabNav'

const App = StackNavigator({
  Main : {
    screen : MainScreen,
    navigationOptions: {
      title: 'Main',
    }
  },
  Sub1 : {
    screen : Sub1Screen,
    navigationOptions: {
      title: 'Sub1',
    }
  },
  Sub2 : {
    screen : Sub2Screen,
    navigationOptions: {
      title: 'Sub2',
    }
  },
  Tab : {
    screen : Tab,
    navigationOptions: {
      title: 'Tab',
    }
  },
});
export default App;
 

 

반응형

댓글2

  • 리액트 2021.05.26 21:06

    import from 'react-navigation'

    여기 사이가 비어있는데 뭔가요?
    답글

    • Dokon Jang 2021.05.26 23:40 신고

      포스트를 수정했는데, 최신의 react-native에서는 방법이 바뀌었습니다.

      아래의 포스트를 확인하세요.

      https://docko.tistory.com/entry/react-native-0640-%ED%99%94%EB%A9%B4%EA%B0%84-%EC%9D%B4%EB%8F%99

      https://docko.tistory.com/entry/React-Native-0640-%ED%99%94%EB%A9%B4%EA%B0%84-%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8C%8C%EB%9D%BC%EB%A9%94%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0