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 AsyncStorage4 react-native-async-storage4.1 インストール4.2 実装5 Realm5.1 インストール5.2 redu ...

元mac使いがUbuntuで理想の作業環境に近づけるためにやったこと

1 はじめに2 Ubuntuのインストール2.1 買ったもの2.2 インストールメディアの作成2.3 インストールメディアの起動3 キーボード・トラックパッド周りのカスタマイズ3.1 kinto.sh ...

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

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

ReactNative入門

1 はじめに2 そもそもReact Nativeとは3 JSXとは3.1 JSXに値を埋め込む3.2 属性の値を設定する3.3 関数でJSXを作る4 コンポーネントとは4.1 再利用性4.2 新規コン ...

【Unity】URP対応のAssetのPrefabがピンク色になる件

1 はじめに2 レンダリングパイプラインとは2.1 ビルトインレンダリングパイプライン2.2 ユニバーサルレンダリングパイプライン3 URPの設定手順3.1 URPのインストール3.2 URPのアセッ ...

フォロー

blog-page_side_responsive

2019年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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