【React Native】アプリ開発 〜画面遷移に挑戦してみた〜

複数のアプリ画面を登録してみた。
※結論から言うと、この記事ではまだボタンでの画面の遷移はしません。

実行したコード

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!!が表示されます。
次回こそは画面を遷移させます！