Tech

ReactNative画面遷移

投稿日:2019年6月6日 更新日:

はじめに

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

React Navigation

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

React Navigationのインストール

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

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

実装

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

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

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

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

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

 

さいごに

今回は「React Navigation」で実装を行ってみましたが、アプリの機能やデザインによっては他のライブラリも有効そうなので使用してみた際にはまたご紹介したいと思います。

おすすめ書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)  React.js&Next.js超入門

page_footer_300rect




page_footer_300rect




-Tech
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

ReactNativeデータ永続化

1 はじめに2 データ永続化の方法3 AsyncStorage4 react-native-async-storage4.1 インストール4.2 実装5 Realm5.1 インストール5.2 redu ...

入門スクラム〜スクラムフレームワーク

1 はじめに2 スクラムの特徴2.1 シンプルなフレームワークであること2.2 素早い反復を繰り返すこと2.3 検査・適応・透明性3 スクラムの役割3.1 プロダクトオーナー3.2 スクラムマスター3 ...

[Unity] Terrain(地形)を使ってみた

1 はじめに2 Terrainの追加方法3 Terrainの使い方4 Create Neighbor Terrain5 Paint Terrain5.1 Raise or Lower Terrain5 ...

ReactNative開発のスタート、シミュレータでのデバッグ

1 はじめに2 改めてシミュレータの起動3 表示内容を変更してみる3.1 App.js3.2 表示テキストの変更3.3 シミュレータの更新「command + R」4 デバッグメニュー4.1 Real ...

C# マルチキャストデリゲートの備忘録

1 はじめに2 C#のデリゲートについて2.1 デリゲートの定義3 マルチキャストデリゲートについて3.1 追加方法3.2 削除方法4 さいごに5 おすすめ書籍 はじめに こんにちはsuzukiです。 ...

フォロー

follow us in feedly

page_side_300rect

2019年6月
« 5月 7月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。