如何保持我的组件(<MainImage>)和平面列表组件可滚动？React Native

import React from 'react';
import { ScrollView, View, Text } from 'react-native';

const MainImage = () => {
  return (
    <View>
      {/* 主要图片组件的内容 */}
    </View>
  );
};

const FlatListComponent = () => {
  return (
    <View>
      {/* 平面列表组件的内容 */}
    </View>
  );
};

const App = () => {
  return (
    <ScrollView>
      <MainImage />
      <FlatListComponent />
    </ScrollView>
  );
};

export default App;

import React from 'react';
import { FlatList, View, Text } from 'react-native';

const MainImage = () => {
  return (
    <View>
      {/* 主要图片组件的内容 */}
    </View>
  );
};

const FlatListComponent = () => {
  const data = [
    // 平面列表的数据
  ];

  const renderItem = ({ item }) => {
    return (
      <View>
        {/* 渲染每个列表项的内容 */}
      </View>
    );
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
    />
  );
};

const App = () => {
  return (
    <View>
      <MainImage />
      <FlatListComponent />
    </View>
  );
};

export default App;