FlatList内容不适合100％

Question

我有这个FlatList内容，但在ios中却不能100％在android模拟器上显示

我为容器和contentContainer尝试了不同的样式，但是没有任何效果

我也尝试了很多天来解决这个问题，我删除了标签，但没有任何反应

import React, {useState, useEffect} from 'react';
import {Text, View, StyleSheet, TouchableOpacity, FlatList, ScrollView} from 'react-native';
import Header from '../Components/Header';
import Card from '../Components/Card';
import azkar from '../api/azkar';
import CardSection from '../Components/CardSection';


const ShowScreen = ({navigation}) => {

    const [text, setText] = useState({});
    const [repeat, setRepeat] = useState(null);

    const id = navigation.getParam('id');

    const fetchText = async () => {
        const response = await azkar.get(`/${id}`);
        setText(response.data);
    };

    const number = () => {
        setRepeat(repeat - 1);
    }

    useEffect(() => {
        fetchText();
    }, []);






    return (
        <View style={{marginHorizontal : 20}}>
        <Header header ={text.name} />
        <ScrollView>
        <FlatList 
        data={text.content}
        keyExtractor = {(text) => text.id}
        showsVerticalScrollIndicator = {false}
        renderItem = {({item}) => {
            return (
                <View style={styles.container}>

                <TouchableOpacity onPress = {() => number()}>
                    <CardSection >
                    <Card >
                    {item.text}
                    </Card>
                    <Card >
                    {item.repeat}
                     </Card>
                    </CardSection>

                </TouchableOpacity>
                </View>
            );
        }}
        />
        </ScrollView>
        </View>
    );
};


const styles = StyleSheet.create({
    container : {
        flexDirection : 'row',
        alignContent : 'stretch',


    }
});


export default ShowScreen;

我期望它在andriod和ios中都可以正常工作，我也需要此函数number（）的帮助才能工作，当按下该键以减少数字时