React Native - 显示模态，可选择在点击它时显示更多

Question

我有一个表单，一旦完成，结果组件将在屏幕上向上滑动显示分数。此组件上将有一个TouchableHighlight，因此一旦按下，Result组件将向上滑动更多以显示有关结果的更多详细信息。因此，在下面填写表单的地方将使我的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。我建议将此方法作为最简单的方法之一。

Answer 2

我用这种布局解决了类似的问题

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

页脚组件将在View底部接收绝对位置，ScrollView将显示常规内容。 必要时，我可以显示FooterComponent，甚至可以使用动画API将其滑入。 然后，您可以将模态渲染为“显示更多”或增加FooterComponent的大小以跨越整个高度。