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

Question

在我的 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> 上有 flexGrow: 1，但它们不会增长以填充垂直 space。如果我将 <ScrollView> 换成 <View>，children 会填充它。这是为什么？

Answer 1

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

您缺少的关键是指定容器样式应该是什么。维护者不会假设您的期望，特别是因为根据您过去的经验，它可能会造成混淆。绝对可以得到你想要的工作。

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

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

React Native: Why doesn't setting flexGrow on a <View> inside a <ScrollView> work?

react-native

flexbox

react-native-scrollview