태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
반응형
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 예제

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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;
 
cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 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');
  }
}
cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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>
    );
  }
}
 
cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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>
    );
  }
}
 
cs


 

TabNavigator 예제

1
2
3
4
5
6
7
8
9
10
11
//TabNav.js
import {TabNavigator} from 'react-navigation'
import Tab1Screen from './Tab1Screen';
import Tab2Screen from './Tab2Screen';
 
const Tab = TabNavigator({
  Tab1 : ,
  Tab2 : ,
});
export default Tab;
 
cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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>
    );
  }
}
 
cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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>
    );
  }
}
 
cs

 

 

StackNavigator과 TabNavigator 조합 예제

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 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;
 
cs

 

반응형
블로그 이미지

Dokon Jang

댓글을 달아 주세요

  • 리액트 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