react-native - ScrollView 和带有 flex : 1 的子项

Question

是否可以使用 ScrollView 包裹的布局？ :

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

并满足以下先决条件:

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

现在是棘手的部分:如果第一个 View 中有很多文本，所以 map 不适合，应该会出现一个卷轴。我无法做到这一点。我想给 map View flex: 1和 minHeight: 250 ，但它根本没有被渲染。

解决方案

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

Answer 1

添加 contentContainerStyle={{flexGrow: 1}}支持 ScrollView及其 child 的 flex:1会工作。所以你不需要手动计算它。