react-native – Scrollview和flex的子项：1

发布时间：2020-12-15 05:07:37 所属栏目：百科来源：网络整理

导读：是否可以使用ScrollView包装的布局： ScrollView Viewdynamic height/View Viewflex with minHeight/View Viewstatic height/View/ScrollView 并满足以下先决条件：第一个视图的高度是动态的(取决于文本长度).第三个视图的高度是静态的(内部总是有三个按钮)

是否可以使用ScrollView包装的布局：

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

并满足以下先决条件：

第一个视图的高度是动态的(取决于文本长度).第三个视图的高度是静态的(内部总是有三个按钮).屏幕的其余部分应填充View with map,但最小高度设置为250.

现在是棘手的部分：如果第一个视图中有很多文本,那么地图不适合,就会出现滚动.我无法做到这一点.我试图给地图View flex：1和minHeight：250,但它根本没有呈现.

解

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

将contentContainerStyle = {{flexGrow：1}} prop添加到ScrollView及其子项的flex：1将起作用.所以你不需要手动计算它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!