React Native에서 스마트 폰 앱 개발을 시작했습니다.
그 때의 지식을 정리해 가려고 생각합니다.

React Navigation 정보

스마트 폰 앱을 개발할 때 큰 벽이되는 것이 "화면 전환"입니다.
그것을 쉽게 (?) 구현할 수 있는 환경을 정돈해 주는 라이브러리가 React Navigation입니다.
React Navigation에는 다양한 화면 전환 패턴이 이미 준비되어 있으므로, 이를 바탕으로 개발을 진행하면 좋을 것입니다.

우선 시도해 보자.

어떤 화면 전환이 있는지 쉽게 데모 할 수 있도록 공식이 준비되어 있습니다.
3분만에 가능합니다.
iOS 또는 Android에서도 가능합니다.
렛츠 트라이! !

1. 스마트폰 앱을 설치합니다.

아래의 앱(Expo or Expo Client)을 Google Play 또는 App Store에서 설치하세요.
Android 버전은 여기
iOS 버전은 여기

2. 스마트폰 앱으로 바코드 로드

방금 설치한 스마트폰 앱(Expo or Expo Client)을 시작한다.
"Scan QR Code"를 엽니다.
아래의 URL에 있는 QR 코드를 이것으로 읽는다.
htps : // 에 x포. 이오 / @ Rea ct-na-gachion / Naa-gachion P-yg 로우 d

그러면


같은 느낌으로 다양한 화면 천이의 패턴의 예를 확인할 수 있습니다.
팀 개발에서 이미지 공유 등에 꼭 도움을 주세요.

【주의】React Native의 버전에 대해서

react native는 버전에 따라 상당히 사양이나 기능이나 필요한 기술이 다르기 때문에 요주의.
여러 사람이 개발할 때는 버전을 반드시 갖추도록 합시다.

1.x 계

1.x계에서는 이런 느낌입니다.

App.js

import { StackNavigator } from 'react-navigation';
import WelcomeScreen from './src/screens/WelcomeScreen';
import SettingScreen from './src/screens/SettingScreen';

const App = StackNavigator({
 Welcome: { screen: WelcomeScreen },
 Setting: { screen: SettingScreen },
});

export default App;

1.x 계 공식 문서는 이쪽

2.x 계

1.x 시스템의 주요 변경 사항으로,

StackNavigator에서 createStackNavigator로 변경되었습니다.

라는 것이 있는 것 같습니다.

App.js

import { createStackNavigator } from 'react-navigation';
import WelcomeScreen from './src/screens/WelcomeScreen';
import SettingScreen from './src/screens/SettingScreen';

const App = createStackNavigator({
 Welcome: { screen: WelcomeScreen },
 Setting: { screen: SettingScreen },
});

export default App;

2.x 계 공식 문서는 이쪽

3.x 계

2.x 시스템에서,

export 할 때를 createAppContainer로 랩한다

요컨대 이런 느낌.

App.js

import { createStackNavigator } from 'react-navigation';
import WelcomeScreen from './src/screens/WelcomeScreen';
import SettingScreen from './src/screens/SettingScreen';

const App = createStackNavigator({
 Welcome: { screen: WelcomeScreen },
 Setting: { screen: SettingScreen },
});

export default createAppContainer(App);

또한,

navigationOptions를 defaultNavigationOptions로 변경

필요합니다.
이 기사를 알기 쉽다.
h tps://ゔぇr-1-0. 네 t / 2019 / 01 / 19 / Suma ry-o-re ct-na gaichion

또한 선인이 치트 시트를 만들어주고 있습니다. 고맙습니다.
3.x 계 치트 시트는 이쪽
물론 공식 문서도 있습니다.
3.x 계 공식 문서는 이쪽

4.x 계

react-navigation 및 react-navigation-stack을 모두 설치하고 가져와야 합니다. 그러므로, 이런 느낌이 됩니다.

App.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import WelcomeScreen from './src/screens/WelcomeScreen';
import SettingScreen from './src/screens/SettingScreen';

const App = createStackNavigator({
 Welcome: { screen: WelcomeScreen },
 Setting: { screen: SettingScreen },
});

export default createAppContainer(App);

React Navigation 환경 구축

그럼 실제로 React Navigation의 환경 구축을 해보자.
이번에는 여러가지 참고 기사가 많을 것 같은 3.x계를 인스톨해 보려고 합니다.

먼저 ls와 cd를 사용하여 개발하려는 프로젝트의 App.js가 존재하는 계층 구조로 이동합니다.

$ npm install --save [email protected]

실행하면,

package.json 파일에는

"react-navigation": "^3.13.0"

되는 기술이 증가하고 있습니다.
다음에는 ReactNavigation에서 실제로 화면 전환을 구현하려고합니다.
질문・코멘트등도 모집하고 있습니다.