여러 앱 화면을 등록해 보았다.
※결론으로부터 말하면, 이 기사에서는 아직 버튼으로의 화면의 천이는 하지 않습니다.

실행한 코드

App.js는 이런 느낌. 이 중 Screen을 복수 가져오고 읽습니다.

App.js

import { createStackNavigator, createAppContainer } from 'react-navigation';

import WelcomeScreen from './src/screens/WelcomeScreen';
import SettingScreen from './src/screens/SettingScreen';

const App = createStackNavigator({
  Setting: { screen: SettingScreen },
  Welcome: { screen: WelcomeScreen },
}, {
  NavigationOptions: {
    headerTitle: 'Header',
    headerStyle: {
      backgroundColor: '#265366',
    },
    headerTitleStyle: {
      cokors: '#fff',
    },
  },
});

export default createAppContainer(App);

WelcomeScreen.js와 SettingScreen.js는 이런 느낌. 우선은 텍스트를 표시하는 단순한 녀석.

WelcomeScreen.js

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

class WelcomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome!!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default WelcomeScreen;

SettingScreem.js

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

class SettingScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Setting!!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default SettingScreen;

이것으로 실행! !



수수께끼의 에러가 출현.

terminal에,

Unable to resolve "react-native-gesture-handler"from "node_modules/@react->navigation/native/src/Scrollables.js"
Failed building JavaScript bundle.

오류 메시지가 있었기 때문에 그것을 의지하기 위해,

$ expo install react-native-gesture-handler

실행.
이번이야말로! !



이 단계에서는 이전에 등록한 화면이 먼저 표시됩니다.
App.js 화면의 등록 순서를 변경하면 Setting!!이 표시됩니다.
그래서 예를 들어
App.js의

App.js

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

부분을

App.js

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

이렇게 하면 Welcome!!이 표시됩니다.
다음 번이야말로 화면을 전환합니다!