将headerView style flex值设置为0，这将保证视图将获得它所需的大小。
Example：

//React
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Image,
  Pressable,
} from 'react-native';
//Expo
import Icon from 'react-native-vector-icons/Ionicons';
//Array of Items
const allComponents = Array(10).fill({
  name: 'Coffe',
  imageURL: require('./assets/snack-icon.png'),
});

export default function Home() {
  //Fetching Users
  // useEffect(()=>{
  //   ...
  // },[],[])

  return (
    <View style={styles.home}>
      <View style={styles.headerView}>
        <Text>Welcome {allComponents[1].name}</Text>
        <Image source={allComponents[1].imageURL} style={styles.avatarImage} />
        <Icon name="notifications" size={20} color="black" />
      </View>
      <View style={{ flex: 1 }}>{/*You have to wrap the scrollview*/}
        <ScrollView contentContainerStyle={{ flexGrow: 0 }}>
          {/*You have to set flexGrow to "0"*/}
          <View>
            {allComponents.map((allComponent, index) => {
              return (
                <View style={styles.cardsView} key={index}>
                  <Pressable onPress={console.log('Noice')}>
                    <Image
                      source={allComponent.imageURL}
                      style={styles.cardImage}
                    />
                    <Text style={styles.cardText}>{allComponent.name}</Text>
                  </Pressable>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  //Layouts
  home: {
    width: '100%',
    height: '100%',
    backgroundColor: 'red',
  },
  headerView: {
    flex: 2,
    justifyContent: 'center',
    backgroundColor: 'green',
  },
  cardsView: {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    backgroundColor: 'ghostwhite',
    margin: '2%',
  },
  //Images
  cardImage: {
    width: '100%',
    height: '100%',
    aspectRatio: '3',
    borderRadius: 10,
  },
  avatarImage: {
    width: '60%',
    margin: '2%',
    borderRadius: 30,
    borderColor: 'ghostwhite',
  },
  //Text
  cardText: {
    position: 'absolute',
    textAlign: 'center',
    fontFamily: 'notoserif',
    fontWeight: 'bold',
    fontSize: 15,
    bottom: 10,
    left: 0,
    right: 0,
    color: 'ghostwhite',
  },
});

字符串

你可以试试这个我觉得这应该对你有用。

//React
import { useEffect } from 'react';
import { StyleSheet, 
  View ,
  Text, 
  ScrollView,
  SafeAreaView, 
  Image,
  Button, 
  Pressable,
  SafeAreaView} from 'react-native';
//Expo
import { StatusBar } from 'expo-status-bar';
// Import vector icons
import Icon from 'react-native-vector-icons/Ionicons';
//Array of Items
const allComponents = [
  { name: 'Coffe', imageURL : require('../Assets/coffe.jpg') },
  { name: 'Cinema', imageURL : require('../Assets/cinema.jpg') },
  { name: 'Football', imageURL : require('../Assets/football.jpg') },
  { name: 'Gym', imageURL : require('../Assets/gym.jpg') },
  { name: 'Coffe', imageURL : require('../Assets/coffe.jpg') },
  { name: 'Cinema', imageURL : require('../Assets/cinema.jpg') },
  { name: 'Football', imageURL : require('../Assets/football.jpg') },
  { name: 'Gym', imageURL : require('../Assets/gym.jpg') },
];

export default function Home() {
 
  return (
   
   
      <SafeAreaView style={{flex:1}}>
        <View style={styles.home}>

            <View style={styles.headerView}>
              <Text>Welcome {allComponents[1].name}</Text>
              <Image 
                source = {allComponents[1].imageURL}
                style={styles.avatarImage}
              />
              <Icon name="notifications" size={20} color="black" />
            </View>

            <ScrollView style={{flex:1}}>
              {allComponents.map((allComponent,index)=>{
              return (
                <View style={styles.cardsView} key={index}>
                  <Pressable onPress={console.log("Noice")}>
                    <Image 
                      source = {allComponent.imageURL}
                      style={styles.cardImage}
                    />
                    <Text style={styles.cardText}>{allComponent.name}</Text>
                </Pressable>
                </View>
              )})}
            </ScrollView>
            
        </View>
      </SafeAreaView>
    
  );
}

const styles = StyleSheet.create({
  //Layouts
  home:{
    flex:1,
    backgroundColor: 'ghostwhite',
  },
  headerView: {
    width:'100%',
    display:'flex',
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center',
    backgroundColor: 'red',
  },
  cardsView:{
    flex:1,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    textAlign:'center',
    backgroundColor: 'ghostwhite',
    margin:'2%'
  },
  //Images
  cardImage:{
    width:'100%',
    height:'100%',
    aspectRatio:'3',
    borderRadius:10,
  },
  avatarImage:{
    width:'6%',
    height:'15%',
    margin:'2%',
    borderRadius:30,
    borderColor:'ghostwhite',
  },
  //Text
  cardText:{
    position:'absolute',
    textAlign:'center',
    fontFamily:'notoserif',
    fontWeight:'bold',
    fontSize:15,
    bottom:10,
    left:0,
    right:0,
    color:'ghostwhite'
  }
});

字符串
如果您想添加自定义标题大小，请在headerview样式中使用height

headerView: {
    width:'100%',
    height:'10%',
    display:'flex',
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center',
    backgroundColor: 'red',
  },

型
像这样