我在开发react-native方面非常天真，请帮助我，首先我使用flex属性编写所有代码，现在我想对该项目进行多次渲染，所以当项目渲染4次时，它会正常，因为屏幕上有4个元素的空间，但是当我尝试引入第5个元素时，因为屏幕只有4个空间，所以第5个元素尝试调整，所以我想让我的Flex属性保持原样例如：我有2个页面，每个页面包含4个项目，然后页面以链格式连接，我有滚动条，这样我的Flex属性就不会受到干扰，我也有滚动条。
在App.js中

function App() {
  return (
    <View style={[styles.container, { backgroundColor: '#e4e3e3' }]}>
      <View style={{ flex: 1 / 5 }} >

        <Header name='Community' subHeading='Mobile App Developer Enthusiasts' />
      </View>
      <View style={{ flex: 4 / 5 }} >
        <CommunitiesList image={require("./assets/cover.png")} />
        <CommunitiesList image={require("./assets/cover.png")} />
        <CommunitiesList image={require("./assets/cover.png")} />
        <CommunitiesList image={require("./assets/cover.png")} />

      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

字符串
在CommunitesList.js中

import React, { useEffect, useState } from "react";
import { StyleSheet, View, Image, Dimensions, Text } from "react-native";

const CommunitiesList = (props) => {
    const { image } = props
    return (
        <View style={{ flex: 1 / 4, flexDirection: 'row', justifyContent: 'flex-end', }}>
            <View style={{ flex: 1, justifyContent: 'center', }}>
                <Image
                    style={styles.cover}
                    resizeMode="cover"
                    source={image}
                />
            </View>
            <View style={[styles.upperStyle, { marginTop: 7, backgroundColor: '#373eb2', height: 30, paddingRight: 6, paddingLeft: 6, position: 'absolute', justifyContent: 'center' }]}>
                <Text style={[{ color: 'white', padding: 2 }, styles.upperHeading]}>Data Science Enthusiasts</Text>
            </View>
        </View>

    );
};
const styles = StyleSheet.create({
    cover: {
        height: 132,
        width: '100%',
        position: "absolute",
    },
    upperHeading: {
        fontSize: 11,
        fontWeight: "700",
        fontFamily: "Calibri",

    },
    upperStyle: {
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12,
        backgroundColor: "#373eb2",
    }
});

export default CommunitiesList;

型
有没有人能帮帮忙，这样CommunityList就可以被渲染多次，而不会像我在4中那样损害Flex属性，只是在它们上面有一个滚动条