コンポーネント階層の深いところから画面全体をカバーするオーバーレイを作成する最適な方法は何ですか?
放棄されていると思われるreact-native-overlay
というlibがあります。また、コアRNの機能で解決できるはずです。
バックグラウンドを入力するだけです。基本的には、Facebook内にあるようなin-app、item-menuを模倣するという考えがあります。下の画像を参照してください。基本的には、各項目には独自のメニューボタンが必要です。メニューボタンをタップすると、メニューが表示されます。メニューの外をタップするとメニューが閉じます。
Now;
AFAIK、クリックがメニュー領域外で行われたことを検出するためのタップハンドラを追加できるウィンドウはありません。したがって、タップをキャプチャできるように、画面全体をカバーするオーバーレイを作成することを考えました。
このようなオーバーレイを作成するにはどうすればよいですか?
position: 'absolute'
は、明示的に指定されていない限り、各コンポーネントがposition: 'relative'
を持つため、親コンポーネントにのみ関連します。
1つのオプションはonLayoutハンドラを追加し、コンポーネントのオフセットを補償するために、負の値に左上を/設定することですが、それはハック感じています。