react-native - 在 Appbar.content 上面有空白空间

Question

我正在使用以下代码创建带有react-native-paperand的标头react-navigation：

return (
        <Appbar.Header theme={{ colors: { primary: "white" } }}>

            {previous ? (
                <Appbar.BackAction onPress={navigation.pop} color={theme.colors.primary} />
            ) : (
                <TouchableOpacity onPress={()=>{navigation.openDrawer();}}>
                    <Avatar.Image
                        size={40}
                        source={{uri: "https://i.imgur.com/2tTU7q1.jpg"}}
                    />
                </TouchableOpacity>
            )}
            <Appbar.Content
                title={
                   <Image source={require("../../assets/images/icon.png")}
                            style={{
                                width: 40,
                                height: 40,
                            }}
                    />
                   }
                titleStyle={{backgroundColor: "red",}}
                style={{alignItems: "center"}}
            />
        </Appbar.Header>
    );

结果是我系统地得到了Image上方的一个空白空间（把背景放红，让它更明显）：

该空间在 .jpg 中不存在，实际上与任何图片一起出现。@expo/vector-icons如果我使用 MaterialCommunityIcons (from ) 而不是图像，则不会出现此空间。

知道是什么原因造成的以及如何删除它吗？

标签： react-nativereact-native-paperreact-navigation-v5