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

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;