カテゴリー: Tech

ReactNative画面遷移

1 はじめに
2 React Navigation
3 React Navigationのインストール
4 実装
5 さいごに
6 おすすめ書籍

はじめに

こんにちはnukkyです。
ブログを書きながらアプリを作成しているのですが、アプリの基本といえば画面遷移ということで今回は画面遷移をやってみようと思います。

React Navigation

今回、画面遷移に使用するライブラリは「React Navigation」を使用したいと思います。ナビゲーション機能を有するライブラリは他にもあるのですが、私自身も初心者ということで公式でも紹介されている「React Navigation」で今回は実装したいと思います。

React Navigationのインストール

ターミナルから「React Navigation」を使用したいプロジェクトに移動し以下を実行してください。

$npm install --save react-navigation
$npm install --save react-native-gesture-handler
$react-native link react-native-gesture-handler

「React Navigation」の準備は完了です。

実装

以下は1ソースの中に２画面(2class)用意したサンプルコードになります。

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; 
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            this.props.navigation.dispatch(StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Details' })
              ],
            }))
          }}
        />
      </View>
    );
  }  
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }  
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

まずは「React Navigation」の機能使用するためにインポートをします。

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

「createStackNavigator」で今回の画面情報を登録しておきます

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
}, {
    initialRouteName: 'Home',
});

今回は「Home」と「Details」の２画面になります。「createAppContainer」でこの情報を登録します。

export default createAppContainer(AppNavigator);

あとはサンプルコードのようにボタンを押下したタイミングで「NavigationActions」を呼び出すことで画面遷移を行うことができます。

<Button
  title="Go to Details"
  onPress={() => {
    this.props.navigation.dispatch(StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'Details' })
      ],
    }))
  }}
/>