滚动视图和带有 flex 的子项:1 [英] Scrollview and child with flex: 1

问题描述

是否可以有一个用 ScrollView 包裹的布局:

Is it possible to have a layout which is wrapped with ScrollView:

<ScrollView>
  <View>dynamic height</View>
  <View>flex with minHeight</View>
  <View>static height</View>
</ScrollView>

并满足以下先决条件:

第一个 View 的高度是动态的(取决于文本长度).第三个 View 的高度是静态的(里面总是三个按钮).屏幕的其余部分应该用带有地图的 View 填充，但最小高度设置为 250.

Height of the first View is dynamic (depends on text length). Height of the third View is static (always three buttons inside). Rest of the screen should be filled with View with map, but the minimal height is set to 250.

现在是棘手的部分:如果第一个 View 中有很多文本，以至于地图不适合，应该会出现一个滚动条.我无法做到这一点.我试图给地图 View flex: 1 和 minHeight: 250，但它根本没有渲染.

Now the tricky part: if there is a lot of text in first View, so that map doesn't fit, a scroll should appear. I couldn't achieve that. I was trying to give the map View flex: 1 and minHeight: 250, but it's not rendered at all.

好的，我找到了解决方法.在第一次渲染中，我得到屏幕高度 (Dimensions) 和第一和第三个视图的高度 (onLayout).然后，我计算第二个视图的高度 (screenHeight - view1 - view3 - naviagtionHeight) 和 forceUpdate() 重新渲染它.

Ok, I've found a way to fix it. In first render, I get screen height (Dimensions) and height of first and third view (onLayout). Then, I calculate the height of second view (screenHeight - view1 - view3 - naviagtionHeight) and forceUpdate() to re-render it.

推荐答案

将 contentContainerStyle={{flexGrow: 1}} 属性添加到 ScrollView 及其子项的 flex:1 会起作用.因此您无需手动计算.

Add contentContainerStyle={{flexGrow: 1}} prop to ScrollView and its children's flex:1 would work. So you don't need to calculate it manually.

这篇关于滚动视图和带有 flex 的子项:1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！