React Native：为什么在 <ScrollView> 内的 <View> 上设置 flexGrow 不起作用？答案

【问题标题】：React Native: Why doesn't setting flexGrow on a <View> inside a <ScrollView> work?React Native：为什么在 <ScrollView> 内的 <View> 上设置 flexGrow 不起作用？
【发布时间】：2019-12-23 03:00:09
【问题描述】：

在我的 React Native 应用程序中，我有以下代码：

  <View style={{flex: 1}}>
    <View style={{backgroundColor: 'black', height: 50}}/>
    <ScrollView style={{borderWidth: 1, borderColor: 'red', flex: 1}}>
      <Text style={{
        borderWidth: 1,
        borderColor: 'blue',
        flexGrow: 1
      }}>aaa</Text>
      <Text style={{
        borderWidth: 1,
        borderColor: 'blue',
        flexGrow: 1
      }}>bbb</Text>
    </ScrollView>
  </View>

请注意，aaa 和 bbb <View>s 上有 flexGrow: 1，但它们不会增长以填充垂直空间。如果我将<ScrollView> 换成<View>，孩子们会填满它。这是为什么呢？

【问题讨论】：

标签： react-native flexbox react-native-scrollview

【解决方案1】：

在此处查看ScrollView 文档：https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle

您缺少的关键是指定容器样式应该是什么。维护人员不会对您的期望做出任何假设，尤其是因为根据您过去的经验，它可能会令人困惑。你绝对可以得到你想要的工作。

这是一个添加到您的代码中的示例：https://snack.expo.io/SkeLDj4EH

【讨论】：

...您好像刚加入 Stackoverflow，感谢您在正确的时间到达！