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

Question

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

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

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

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

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

Answer 1

你可以使用这个属性 flexGrow: 1, 而不是 flex:1

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

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

React Native Scrollview height not changing to fit children elements

css

mobile

scrollview

reactjs

react-native