とがみんブログ
就活中、自己分析にハマり、心理学、脳科学の本を読み漁りつつ哲学チックなことをひたすら考えていました。このブログでは、そんなとがみんの考えや経験を綴っていきます。
React Native

【ReactNative】ナビゲーション機能の実装

どうも、とがみんです。

ブログを管理するアプリFeedminを開発したのですが、

「Feedmin」はSwiftで開発したので、iOSにしか対応していません。

多くの人に使ってもらうために、アンドロイド版の「Feedmin」を作りたいので、React Nativeを勉強することにしました。

勉強したことのアウトプットをこのブログでもしていきます。

この記事では、ナビゲーション機能について説明していきます。

サンプルアプリ

以下が開発したサンプルアプリです。

ボタンを押すと画面が遷移し、ナビゲーションバー上に戻るボタンが表示されます。

実装方法

パッケージのインストール

まず、npmというJavaScriptのパッケージ管理ツールを利用して、ナビゲーションに関するパッケージをインストールします。

ターミナルに以下を打ち込み、実行します。

>react-navigationライブラリ

スクリーンを作成

ナビゲーション機能を実装する前に、遷移前と遷移後用のスクリーンを作成します。

screen01.jsscreen02.jsファイルを作成し、スクリーンを作成します。

screen02.jsscreen01.jsの1を2に変更しただけです。

Navigation機能の実装方法

App.jsを以下のように書き換えます。

これでシュミレートしてみると、Homeに指定しているスクリーンが表示されます。

ナビゲーションバーのデザインの変更は

const App = createStackNavigator()の中身を以下のように記述することによって、ヘッダーの文字や色を変更することができます。

使用するスクリーンの登録

使用するスクリーンの登録をします。

以下のように、使用するスクリーンを追加していきます。

importでスクリーンに関するコードが書かれているファイルを読み込み、

createStackNavigator()Screen02:{screen:Screen02}を追加します。

ボタンの作成

ボタンのUIを作成します。

Btn.jsファイルを作成し、以下のように書きます。

ボタンが押されたときに画面遷移させる

screen01.jsを以下のように変更します。

ボタンが押された時に、this.props.navigation.navigate(‘Screen02’)により、Screen02に遷移します。

GitHub

サンプルのコードはGitHubにあげています。参考にしながら実装してみてください。

>https://github.com/togamin/ReactNavigationSample.git

まとめ

React-Nativeのナビゲーション機能の実装方法について説明しました。

何か不明点等あれば、ご指摘いただけると嬉しいです。

スポンサードリンク