React Native ScrollView如何实现内容小于屏用space-between、超屏可滚动

将样式中contentStyle的flex: 1属性替换为flexGrow: 1即可实现需求，修改后的完整样式代码如下：

container: {
  paddingHorizontal: 8,
},
contentStyle: {
  flexGrow: 1,
  justifyContent: 'space-between',
},

原有JSX结构无需修改。

实现原理 #

• flex: 1是flexGrow: 1、flexShrink: 1、flexBasis: 0的简写，会强制ScrollView的内容容器高度和ScrollView自身高度完全一致，当内容高度超过屏幕高度时，容器不会被内容撑开，因此无法滚动访问底部按钮。
• flexGrow: 1仅控制容器的拉伸规则：当内容总高度小于ScrollView高度时，容器会拉伸至占满ScrollView全部高度，此时justifyContent: 'space-between'生效，按钮固定在页面底部；当内容总高度超过ScrollView高度时，容器高度按内容实际高度计算，不会被限制为屏幕高度，ScrollView可正常滚动，按钮跟随内容流排布在页面末尾，可正常滚动访问。

内容的提问来源于stack exchange，提问作者Wasteland