ios - react native : Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components

标签 ios flexbox react-native

问题:

我有一个带有 2 个 subview 的 ScrollView,我希望它们中的第一个(我们称它为 ViewA)有 {flex: 1},这样另一个(ViewB)就会粘在屏幕底部——但前提是它们总高度小于屏幕。当然,如果它们高于屏幕,我希望它像往常一样滚动。

案例 1(良好):带有长文本的 ViewA,ViewB 随之滚动。 https://rnplay.org/apps/slCivA

情况 2(不好):带有短文本的 ViewA,ViewB 没有固定在底部。 https://rnplay.org/apps/OmQakQ

尝试过的解决方案:

所以我将 ScrollView 的样式和 contentContainerStyle 设置为 flex: 1. 我 同时将 ViewA 的样式设置为 flex:1。但是当我这样做时,ScrollView 的 contentContainer View 被固定到屏幕高度,因此无法在需要时滚动,甚至更糟 - ViewB 与 ViewA 重叠。

案例 3(错误):ViewB 停留在底部,但整个内容不滚动。 https://rnplay.org/apps/wZgtWA

如果这是一个错误 - 如何修复/解决它? 如果这是预期的行为 - 我怎样才能实现我所描述的?

谢谢。

最佳答案

尝试将 {flexGrow: 1} 喂给 contentContainerStyle Prop 代替

关于ios - react native : Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33674789/

相关文章:

javascript - 当用户按下主页按钮时,WebView 中的 Html 页面不会触发 'visibilitychange' 事件(iOS 8)

objective-c - 一对一关系的值类型 Not Acceptable 。所需类型=(空);

html - 强制 flex 元素跨越整个行宽

没有开发的 React 原生故事书。服务器

react-native - 使用 componentWillMount 和 componentDidMount 响应 native setState(...) 警告

javascript - React-Native AirBnb map 未渲染

ios - 将信号从 iPhone 发送到微 Controller

ios - Swift:将重新排列按钮移至左上角

css - 柔性 : Justify-content: space-around but full size on both ends?

css - 如何在达到列的 flex-basis 后使第二列内的文本换行