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


関連記事

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

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

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

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

react-icon

[React初心者]カスタムフックについて学ぶ

1 はじめに2 Ract Hook(フック)とは3 カスタムフックの実装3.1 フックのルール3.2 カスタムフック3.3 カスタムフックの実装4 さいごに5 おすすめ書籍 はじめに 今回はReact ...

Go言語

Golang で図形描画してみた

1 はじめに2 Golangで画像描画する方法3 ggでの画像描画3.1 導入3.2 基本的な画像描画4 ジェネレーティブしてみた5 さいごに6 おすすめ書籍 はじめに 今回は、Goで2Dグラフィック ...

[Flutter]カメラのフレームデータを使ってリアルタイム画像認識

1 はじめに2 準備3 実装3.1 カメラプレビューの作成3.2 プレビューからフレームデータ取得3.3 フレームデータから画像認識3.4 画像認識した箇所に枠線の表示4 さいごに5 おすすめ書籍 は ...

フォロー

blog-page_side_responsive

2019年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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