由于某种原因，我的一个组件中的ScrollView不工作，尽管在我实现它的每个其他组件中都能工作。尝试实现类似问题的解决方案似乎只是让我想要显示的内容消失。
我希望有一个可滚动的餐厅菜品列表，我创建了一些虚拟数据来传递，但注意到它在到达手机屏幕末尾后没有滚动。

const testFoods = [
  {
    title: "test",
    description: "Lorem Ipsum",
    price: "$7.77",
    image: "dummyLink",
  },
// Same as above but 4 more times, didn't want to clog up the description
];

export default function MenuItems() {
  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      {testFoods.map((food, index) => (
        <View key={index}>
          <View style={styles.menuItemStyle}>
            <FoodDetails food={food} />
            <FoodImage food={food} />
          </View>
        </View>
      ))}
    </ScrollView>
  );
}

const FoodDetails = (props) => (
  <View style={{ width: 240, justifyContent: "space-evenly" }}>
    <Text style={styles.titleStyle}>{props.food.title}</Text>
    <Text>{props.food.description}</Text>
    <Text>{props.food.price}</Text>
  </View>
);

const FoodImage = (props) => (
  <View>
    <Image
      source={{ uri: props.food.image }}
      style={{
        width: 100,
        height: 100,
        borderRadius: 8,
      }}
    />
  </View>
);

const styles = StyleSheet.create({
  menuItemStyle: {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 20,
  },

  titleStyle: {
    fontSize: 19,
    fontWeight: "600",
  },
});

结果如下所示Result with code above顺便说一下，带有示例餐馆图像的Header组件是一个单独的组件。
我有更多的数据，不能被视为无论什么原因，屏幕拒绝滚动。我用我的实际手机进行测试，但结果是相同的，当我使用模拟器，滚动不起作用。在网上看后，我想我会尝试添加一个父视图与flex：1和一个flexGrow：1设置为滚动视图内的contentContainerStyle，如下所示。

export default function MenuItems() {
  return (
    <View style={{ flex: 1 }}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        {testFoods.map((food, index) => (
          <View key={index} style={styles.menuItemStyle}>
            <FoodDetails food={food} />
            <FoodImage food={food} />
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

但这只会导致内容消失，重新加载应用程序也不会改变任何东西
尝试使用FlatList也有同样的结果。我还读到过，任何子组件的高度样式值都基于百分比，这会使滚动停止工作，但我的所有组件都没有使用这种方法。当我将外部视图的样式更改为高度时，奇怪的是：400，我可以让滚动工作，但这是非常草率的，可能只会工作在类似于我的手机屏幕。我知道ScrollView组件工作正常，因为当我添加“水平”滚动工作正常，我能够滚动到数据集中的最后一项。显然，所有的内容现在是水平的。After adding horizontal too ScrollView, scrolling works fine horizontally
有什么想法吗？会不会是我没有注意到的风格的一部分？我无法在iOS上测试这个问题，所以我不确定这是否是Android特有的问题，虽然滚动在我的其他组件中工作正常，但这会很奇怪。
这里还有Header组件代码，以防它可能是其中的任何内容，尽管它不应该是。

const testImage =
  "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Restaurant_N%C3%A4sinneula.jpg/800px-Restaurant_N%C3%A4sinneula.jpg";

const testTitle = "Sample Restaurant";

const testDescription = "Thai · Comfort · $$ · 🎫 · 4 ⭐ (217+)";

export default function About() {
  return (
    <View>
      <RestaurantImage image={testImage} />
      <RestaurantTitle title={testTitle} />
      <RestaurantDescription description={testDescription} />
    </View>
  );
}

const RestaurantImage = (props) => (
  <Image source={{ uri: props.image }} style={{ width: "100%", height: 180 }} />
);

const RestaurantTitle = (props) => (
  <Text
    style={{
      fontSize: 29,
      fontWeight: "600",
      marginTop: 10,
      marginHorizontal: 15,
    }}
  >
    {props.title}
  </Text>
);

const RestaurantDescription = (props) => (
  <Text
    style={{
      marginTop: 10,
      marginHorizontal: 15,
      fontWeight: "400",
      fontSize: 15.5,
    }}
  >
    {props.description}
  </Text>
);