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超入門

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

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

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

ReactNativeでアニメーションの実装

1 はじめに2 準備3 実装3.1 イベントを通しての実行3.2 アニメーションについて4 lottie-react-native4.1 Lottieとは5 準備6 実装7 さいごに8 おすすめ書籍 ...

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 ...

[Flutter]画像のトリミングを簡単に行えるimage_cropperを使ってみる

1 はじめに2 準備3 実装4 さいごに5 おすすめ書籍 はじめに 今回は、トリミングなど画像加工を簡単に行えるimage_cropperを使ってみたいと思います。 準備 次のコマンドを使用し、パッケ ...

フォロー

blog-page_side_responsive

2019年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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