React Native - Reveal modalをタップすると詳細を表示するオプションが表示されます

Question

フォームが完成したら、Resultコンポーネントが画面上をスライドしてスコアを表示します。このコンポーネントにはTouchableHighlightがあるため、一度押すとResultコンポーネントがさらにスライドして結果の詳細が表示されます。以下のようにフォームを完成させると、結果のコンポーネントにボタンが表示され、詳細情報が表示されます。

Show result 
|--------------------------| 
| Result Score: 100 ^| 
|       | 
|--------------------------| 
______________________________ 
Click on arrow to reveal more information 
|--------------------------| 
| Result Score: 100  | 
|       | 
| Some more info   | 
|--------------------------| 

現時点では、スタイルの操作とフレックス値の変更によって結果コンポーネントが表示されますが、結果的にフォームが縮小されます。フォームが結果によって覆われているかどうかは問題ではないので、より良い解決策がモーダルをレンダリングすることだったら私は考えていました。私はこれを実装するための推奨事項を探しています。

Answer 1

flexの仕組みを理解する必要があります。全体を部分に分割すると考えてください。コンテンツを追加するときは、コンテナの垂直高さを増やす必要があります。

動的に生成された可変高さのコンテンツを処理する最も簡単な方法は、コンテンツをscrollviewに入れることです。 contentContainerStyleを{ alignItems: 'stretch', alignSelf: 'stretch' }のように設定し、scrollviewの子にflexを定義しないようにすることで、必要なだけ多くの領域を必要に応じて使い分けることができます。

これはすべての使用例ではうまく機能しない可能性があります。場合によっては、実際にはscrollviewが欲しくない場合もあります。私はちょうどこの方法を最も単純なものの1つとして提案します。

Answer 2

IはViewの底部上の絶対位置を受信することになる。このレイアウト

render { 
    return (
    <View> 
     <ScrollView/> 
     <FooterComponent/> 
    </View> 
) 
} 

フッタ成分と同様のものを解決したとScrollViewは、通常のコンテンツを表示します。 FooterComponentを表示したり、アニメーションAPIを使用してスライドさせたりすることもできます。 次に、「もっと見る」ようにモーダルをレンダリングするか、高さ全体にまたがるようにFooterComponentのサイズを大きくします。