問題タブ [react-native-flexbox]

flexWrap にあるボックス内のテキストを垂直方向に中央揃えにしようとしています。ただし、ボックスの数に応じて、中央より少し上または下になります (???)。ボックスが追加されるにつれて、すべての Hello が上に移動するのを確認します。

Expo のスナックはこちら: https://snack.expo.io/@danbock/vertically-center-text

ボックスの数に関係なく、このテキストを中央に配置するにはどうすればよいですか?

Saveエンティティのデータを変更している可能性がある特定の画面でユーザーに警告を表示するためだけに、カスタムの戻るボタン コンポーネントを作成しました。画面から移動する前にヒットしないと、それらの変更が失われます。

完全な CustomBackButton コンポーネント コードのスナックへのリンク

(スナックは実行されません。使用している完全なコードを提供するために使用しているだけです)

このロジック/実装は意図したとおりに機能しますが、外観は iOS のネイティブの戻るボタンの外観とは大きく異なります。これを可能な限りエミュレートして、ユーザーがアプリケーション全体のどこでもボタンがネイティブエクスペリエンスと同じであると感じることができるようにする方法を考えています.

何をアドバイスしますか？フレックスボックスの改善、ハッキーな RNN 改造など、あらゆる提案を受け入れます。

カスタム戻るボタン:

ネイティブの戻るボタン:

flex-boxを使ってreactネイティブアプリのUIをデザインしています。しかし、コードは期待される結果を示していませんか?

問題

の Margin プロパティInnerContainer2がmargin:'5%'垂直方向の等間隔をカバーしていません。

コード：

期待される出力

実際の出力

React Nativeで、AndroidでGoogleマップの「探索」に似たUIレイアウトを実装しようとしています（gifを参照）。

私の UI デザインでは、画面の下部にアプリ ナビゲーション タブがあり、ページ マップの背景全体があり、タブの上にある「下部シート」がオーバーレイされ、上部に検索ボックス コンポーネントがあります。以下の UI スケッチを参照してください。

便利そうなさまざまな反応ネイティブ UI コンポーネントを見つけましたが、必要なレイアウトに配置するためのスタイリングがわかりません。

rn-bottom-drawer など、私が見ているいくつかのボトムシート コンポーネントは、作成しようとしているものと同様の GIF を表示しますが、そのUIがどのようだったかを示す実際のコード例は見つかりません。作成した。たとえば、同じライブラリの例では、空の画面の上に一番下の引き出しが表示されています。

説明されているレイアウトを作成するには、ラッピング要素とスタイルをどのように組み合わせるとよいでしょうか? 私は XAML のバックグラウンドを持っており、この種のレイアウトは非常に簡単に作成できますが、反応ネイティブでそれを行う方法がわかりません。