React-native-picker 在 IOS 设备上占用太多空间

Question

我正在为我的移动应用程序开发一个屏幕，它有一个搜索栏、两个选择器和一个要显示给用户的卡片列表。顶部是搜索栏，下面是两个并排排列的选择器。然后卡片列表将显示在它们下方。在我的 android 设备中，这完美显示。但是我在IOS模拟器上测试的时候，发现pickers占了很多高度，列表里只显示了1.5张卡片。在 android 设备中，列表占据了大部分屏幕部分。在 IOS 设备中，似乎选择器的高度和列表的高度相同，这是我不想要的。如何降低选择器的高度，使列表占据大部分屏幕空间。下面是我的代码示例：

return (
        <SafeAreaView style={styles.container}>
            {isLoading ? (<ActivityIndicator color="green" size="large"/>) : (
        <View style={styles.tabContainer}>
          
            <Searchbar style={styles.search}
                placeholder="Type here..."
                onChangeText={//some action}
                value={search}
            />
            <View style= {styles.filter}>
            <Picker style={styles.picker}
                selectedValue={searchByValue}
                onValueChange={ //some action
                }
                prompt="Search By:"
                >
                
                <Picker.Item label="  label1" value="label1" />
                <Picker.Item label="  labe2" value="label2" />
                <Picker.Item label="  label3" value="label3" />
                <Picker.Item label="  label4" value="label4" />
            </Picker>
            <Picker style={styles.picker}
                selectedValue={selectedValue}
                onValueChange={// some action
                }
                
                >
                <Picker.Item label="value1" value="value1" />
                <Picker.Item label="value2" value="value2" />
            </Picker>
        </View>
            <FlatList  
                     showsHorizontalScrollIndicator={false}
                     data={filteredDataSource}
                     renderItem ={({ item }: { item: Item }) =>  <Card item={item} onTap={(item: Launch) => onTapItem({navigation, item})} /> } 
                     keyExtractor={(item) => `${item.id}`}
                    
                    /> 
            </View>)}
        </SafeAreaView>         
    )
}

这里已经定义了样式：

const styles = StyleSheet.create({
    container: {
        flex:1,
        alignItems: 'center'
    },
    tabContainer: {
        backgroundColor: '#dcdcdc',
        marginBottom:1
    },
    filter: {
        flexDirection: 'row',
        alignSelf: 'center'
    },
    search: {
       marginTop:7,
    },
    picker: {
        marginLeft: 5,
        width: 170,
        borderColor: 'black',
    },}

我尝试保持 tabContainer 1 的弹性；然后将 flex 赋予 flatlist 为 3，将 flex 赋予 filter 为 1。这也不起作用。我正在使用来自“@react-native-picker/picker”的{Picker}。