超簡単ボトムシートを作成するために React Native に切り替えた理由

最近転職しましたが、最初の仕事の 1 つは、React Native でボトムシートを作成することでした。

ネイティブの Android 開発のバックグラウンドを持っているので、ネイティブでボトムシートを作成するのと同じくらい大変だと思っていました。しかし、私はとても間違っていました！私はとても魅力的だったので、React Native でボトムシートを作成するための簡単なチュートリアルを書くことにしました.

ボトム シートは、画面の下から上にスライドする便利なコンポーネントで、多くの場合、さまざまなオプションが含まれています。モダンなデザインでは非常に一般的で、Uber、Zomato などのアプリで使用されています。

最終結果は次のようになります:

それでは、React Native でボトムシートを作成する方法を見てみましょう。

はじめに

まず、React Native で新しいプロジェクトを作成します。これには expo-cli を使用しています。 expo-cli を知らない場合、または React Native を使い始めたばかりの場合は、このリンクを確認してください。

プロジェクトに BottomSheetDemo という名前を付けました。

次に、react-native-modalbox をインストールする必要があります。これにより、アニメーション、位置、背景など、多くの組み込み機能が提供されます。

$ expo install react-native-modalbox@1.7.1

注:バージョン 1.7.1 をインストールすることを忘れないでください。最新バージョンには、backdropPressToClose が機能しないバグがあります。

モーダルの作成

モーダルを作成する時が来ました。最初に提供されたコードを削除し、次を App.js ファイルに追加します。

これは、ボトムシート/モーダルの骨組みです。モーダルの中央にテキストを表示するだけです。

インタラクションの追加

ボタンが押されたときに一番下のシートが表示されるようにする必要があります。相互作用を追加しましょう。

画面の中央にシンプルなボタンを追加します:

このボタンをクリックすると、ボトムシートを表示/非表示にする必要があります。これを行うには、useState React フックを使用して状態を維持します。

モーダルには「isOpen」という名前のプロップがあり、ボトムシートの表示/非表示を切り替えることができます。それを示すために、単純に modalVisible を false に設定し、その逆も同様です。

しかし、最初に、コードの残りの部分からモーダルを分離しましょう。モーダルを返す別の関数を作成します。

コードはよりきれいに見えます。しかし、下のシートはまだ下のシートのようには見えません。スタイルを追加する必要があります。

スタイリングを追加しましょう!

スタイルシートを作成し、それに次のスタイルを追加します:

最終的なコードは次のようになります:

最後に、React Native でボトムシートを作成しました。非常にシンプルで、ネイティブの Android よりもはるかに簡単に作成できます。

iOS については試したことがないのでコメントできません。

iOS 開発者であるか、iOS でボトムシートを作成した経験がある場合は、その経験を教えてください。

モバイル開発者向けの AndroidVille SLACK ワークスペースに参加してください。人々は、最新の技術、特に Android 開発、RxJava、Kotlin、Flutter、モバイル開発全般について学んだことを共有しています。

このリンクをクリックして、ワークスペースに参加してください。完全無料です。

あなたが読んだものは好きですか? Facebook、Whatsapp、およびでこの投稿を共有することを忘れないでください LinkedIn .

LinkedIn、Quora、Twitter、Instagram で私をフォローしてください。モバイル開発、特に Android と Flutter に関する質問に答えています。