React Native Scrollview 高度不会改变以适应子元素答案

【问题标题】：React Native Scrollview height not changing to fit children elementsReact Native Scrollview 高度不会改变以适应子元素
【发布时间】：2021-08-26 04:23:24
【问题描述】：

我在 StackOverflow 和网络上的其他地方浏览了很多帖子，但找不到类似的问题。

我正在开发一个具有 ScrollView 的 React Native 应用程序，但问题是它的高度没有增加以适应子元素，并且屏幕无法滚动以查看所有内容。

与此类似的屏幕布局：https://codesandbox.io/s/youthful-bogdan-moges?file=/src/App.js 或https://snack.expo.dev/ZnhfpNHoc（请选择 iOS 而不是 Web） - 我已为外部和内部 ScrollView 元素赋予背景颜色以突出显示问题。在 CodeSandbox 中，您可以滚动到底部，但在移动设备上，您实际上无法滚动到蓝色元素的底部边框下方。

我尝试了很多方法，例如将 flex: 1 设置为 SafeAreaView、主视图以及 ScrollView 的样式和 contentContainerStyle。可以通过设置 minHeight（在 CodeSandbox 中注释掉）来增加可滚动区域的高度，但我需要它是动态的，因为数据量可以是任何东西。

如果有人知道这个问题的解决方案，非常感谢。

【问题讨论】：

你能添加一些你已经完成的代码吗？
当然，它在 CodeSandbox 中：codesandbox.io/s/youthful-bogdan-moges?file=/src/App.js

标签： css reactjs react-native mobile scrollview

【解决方案1】：

您可以使用此属性flexGrow: 1, 代替flex:1

 contentContainer: {
    //flex:1,
     flexGrow: 1,
    // minHeight: '300%',
    backgroundColor: "cyan"
  },

【讨论】：

您指的是哪个元素？我已经尝试将它添加到每个元素中，但不幸的是它不起作用
你应该在contentContainer滚动视图样式上添加padding，而不是滚动视图样式。它提供了更好的 UI 改进。
感谢您的回答！不幸的是，它在我的生产应用程序中不起作用（我将进一步调查原因），但它确实是 CodeSandbox 中的解决方案，所以我将其标记为正确答案。也感谢关于填充的建议。