首页 \ 问答 \ 使用带有flex的minHeight会创建意外的填充(Using minHeight with flex creates unexpected padding)

使用带有flex的minHeight会创建意外的填充(Using minHeight with flex creates unexpected padding)

码:

<View style={{ flex: 1, borderColor: 'orange', borderWidth: 5 }}>
    <View style={{ flex: 1, minHeight: 50, backgroundColor: 'skyblue', borderColor: 'blue', borderWidth: 5 }} />
    <View style={{ flex: 1, backgroundColor: 'pink', borderColor: 'red', borderWidth: 5 }} />
</View>

截图:

注意底部的空白区域。 两个子视图不会填充父视图。 这仅在添加minHeight: 50时发生。 白色空间的高度似乎与minHeight的值相同。

财富

ENV:

真正的设备,iPhone和Android。


code:

<View style={{ flex: 1, borderColor: 'orange', borderWidth: 5 }}>
    <View style={{ flex: 1, minHeight: 50, backgroundColor: 'skyblue', borderColor: 'blue', borderWidth: 5 }} />
    <View style={{ flex: 1, backgroundColor: 'pink', borderColor: 'red', borderWidth: 5 }} />
</View>

Screenshot:

Note the white space at the bottom. The two children View does not fill the parent view. This only happens when minHeight: 50 is added. The height of the white space seems to be the same as the value of minHeight.

asset

Env:

Real Device, both iPhone & Android.


原文:https://stackoverflow.com/questions/44514465
更新时间:2022-09-25 10:09

最满意答案

使用flexGrow而不是flex。 下面给出工作实例。

<View style={{ flexGrow: 1, borderColor: 'orange', borderWidth: 5 }}>
   <View style={{ flexGrow: 1, minHeight: 50, backgroundColor: 'skyblue', borderColor: 'blue', borderWidth: 5 }} />
   <View style={{ flexGrow: 1, backgroundColor: 'pink', borderColor: 'red', borderWidth: 5 }} />
</View>

这是截图。

flexGrow with minHeight


Use flexGrow instead of flex. Working example is given bellow.

<View style={{ flexGrow: 1, borderColor: 'orange', borderWidth: 5 }}>
   <View style={{ flexGrow: 1, minHeight: 50, backgroundColor: 'skyblue', borderColor: 'blue', borderWidth: 5 }} />
   <View style={{ flexGrow: 1, backgroundColor: 'pink', borderColor: 'red', borderWidth: 5 }} />
</View>

Here is the screenshot.

flexGrow with minHeight

相关问答

更多

最新问答

更多
  • 在页面树中使用不同的域(Use different domains in page tree)
  • 为什么这个半圈不会成长?(Why won't this semi circle grow?)
  • 如何学习计算机编程?
  • 如何在单个gcc命令中将多个头文件包和库目录添加到搜索路径?(How to add multiple header include and library directories to the search path in a single gcc command?)
  • VB.Net绑定datagridview Comboboxcolumn到datagridviewTextboxColumn(VB.Net binding datagridview Comboboxcolumn to datagridviewTextboxColumn)
  • 数据库设计 - 当一个记录有许多属性时(database design - when one record has many properties)
  • MATLAB函数计算两个坐标(纬度和经度)之间的距离(MATLAB function to calculate distance between two coordinates (latitude and longitude))
  • 如何从TFS中的团队项目查询所有PBI的历史变更?(How to query all PBI's historical changes from a team project in TFS?)
  • 使用点表示法的Python导入无法按预期工作(Python import using dot notation doesn't work as expected)
  • 我们能否将String列设置为partitionColumn?(Can we able to set String column as partitionColumn?)
  • 下划线模板无法按预期工作(Underscore template doesn't work as intended)
  • 怎么写项目开发的文档?
  • 为什么我的plpgsql函数没有返回任何行(why does my plpgsql function return no rows)
  • 补偿ARM中断的延迟?(compensating latency on ARM interrupts?)
  • Clojure:半平铺嵌套序列(Clojure: Semi-Flattening a nested Sequence)
  • Array方法返回所有null元素而不是object元素(Array method returning all null elements instead of object elements)
  • 禁止基于IP的用户,而不允许管理员访问IP(Ban user based on IP without allowing Admin to access IP)
  • c#wpf多重绑定不是很流行(c# wpf Multibindings not aviable)
  • 亚马逊Generic是什么意思
  • 如何在jgroup复制的hashmap中为状态转移提供超时?(How to give timeout for state transfer in jgroup replicated hashmap?)
  • highcharts可以生成这样的3d柱形图吗?(Can highcharts generate a 3d column chart like this?)
  • 在rails控制台中选择第二个条目?(Selecting second entry in rails console?)
  • 通过了解标记并且不循环遍历项目,将值设置为列表视图的某列中的行(Set a value to a row in a certain column of a listview by knowing the tag and without looping through items)
  • 杀死一个分叉的孩子(Kill a Forked Child)
  • 什么是代码点和代码空间?(What is a code point and code space?)
  • 如何在ruby中获取第一个html标记和第二个html标记之间的内容(how to get the content between the first html tag and the second html tag in ruby)
  • 需要在recyclerview中获取新添加项的视图参考(Need to get the view reference of newly added item in recyclerview)
  • 我今天部计算机出现故障啊,在按开机后,主机便发出“迪”的开机的报警声啊,在上午上过后就不行了,我只是把计算机的所有线重插过就这样,因为D线太乱啊,整理下。但到晚上计算机又能开机啊,可以详细告诉原因吗
  • 将字符串转换为NumPy datetime64 dtype(Convert string to NumPy datetime64 dtype)
  • 模块VB.Net中的命名空间(Namespace in module VB.Net)