【11】React Nativeでテキストエディタを作ってみる!【メニューエリア作成編】

こんにちは!かたつむり(@Katatumuri_nyan)です!

Reactを触ってみて、サイト的なものは作れるようになりました(*´ω`)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)

今回は、メニューエリアを作成していきます!
機能を沢山付けるメニューエリアが一番大変なので、頑張りますw

GitHubでソースコードを管理しています!

最初から見る↓
【1】React Nativeでテキストエディタを作ってみる!【下調べ編】【1】React Nativeでテキストエディタを作ってみる!【下調べ編】

前回を見る↓
【10】React Nativeでテキストエディタを作ってみる!【ナビ・エディタエリア作成編】【10】React Nativeでテキストエディタを作ってみる!【ナビ・エディタエリア作成編】

メニューエリアを作成

image 1
↑この左側に表示されるメニューエリアを作っていきます!

デザイン段階では、テキストエリアの上に被るように表示する予定でした。
しかし今回は、利便性を考えて、テキストエリアと並ぶように表示したいと思います!

Menu.jsの作成

picture 6
↑こんな感じで左側にメニューエリアを作成しました。

コードは↓このようになりました。

メニューエリア開閉機能の作成

左から右にスワイプすることで、メニューエリアを開閉させたいと思います(*´ω`)

Main.jsで↑このようにラップしました。

また、↑のように設定して、開閉できるようになりました(^▽^)/

あと、メニューエリアが開いていると、プレビューエリアの大きさが変わるので、スワイプ判定を変えました!

メニューボタンの作成

picture 7
↑このようにボタンを作成しました(*´ω`)

色々機能をつけるので、とりあえずシンプルなボタンにしました。

ナビの開閉の連動

picture 8
↑こんな感じで、メニューが開いたとき、ナビも開いてほしいので、連動させます。

Nav.jsで以下のようにしました。

ナビボタンを押したときの動作設定

picture 8
↑このナビボタンを押したときに、メニューが開いてほしいので、機能を付けていきます!

↑この様な関数を作成し、context.jsでデータのやりとりをすることにしました。

押したボタンによるコンポーネントのきりかえ

↑このように、whichMenuOpenの値によって表示するコンポーネントを変えます。

このあたりの挙動は、もうちょっと変更したい部分があるので、後で変更予定です!

メニュー内のボタンを押したときの挙動追加

設定メニュー

picture 9
↑左のように表示したいのですが、ボタンを押すと右のように下に開くようにしたいです。
これを設定していきます!

↑このようにできました!

↑コードはこのようになりました。
MenuBtnMenuBtnChildをコンポーネントとしてまとめようか悩みましたが、ちょっと保留です。

とりあえず、設定メニューでスイッチコンポーネントなども使うので、まとめないことにします。

エクスポートメニュー

picture 10
↑このようなかんじになります!
エクスポートメニューでは、開くようにはせず、押すだけのボタンにします。

↑コードはこんな感じになりました。
今はonPressに仮の関数を渡していますが、後でエクスポート用の関数に変えます!

フォルダーメニュー

picture 11
↑フォルダーメニューを作成します。

ボタンを押すと開くのは設定メニューと同じですが、ファイルを選択した時などの挙動が変わるので、ちょっと難しいです。

picture 1

↑のようになりました。

↑コードはコチラ
ファイルシステムを使って情報を取得するので、データはダミーです!

フォルダー・ファイル追加メニュー

picture 12
↑このように、新規ディレクトリ・ファイルを作成できるようにします。
とりあえず、ボタンを作成しておきます。

picture 3
↑このようになりました。

↑コードはこんな感じ。

プロジェクト・ファイル追加用のモーダル作成

デザインでは書いていなかったですが、プロジェクトやファイルを追加する際にファイル名を入力しないといけないことに気づきました。

画面いっぱいのモーダルを作って、そこにインプットエリアを追加することにします。

Modal.jsを作っていきます!

picture 4
↑できました!

↑コードはこんな感じ

押したボタンによって動作が変わるように設定しています。

ここから、難関のファイルシステムが始まります(((o(゚▽゚)o)))
がんばります!ww

↓続き
【12】React Nativeでテキストエディタを作ってみる!【ファイルシステム編】【12】React Nativeでテキストエディタを作ってみる!【ファイルシステム編】

コメントを残す

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