React-native header 标题图片被截断了，为什么？

蓝调

所以我正在开发一个 react-native 应用程序，我正在使用 react-navigation 进行导航，在屏幕选项的 headerTitle 中使用图像可以工作，但是图像被切断了。我试过弄乱图像的高度/宽度，想知道这是否是标题的填充问题，但仍然没有。任何想法为什么？

这是组件

import React from "react";
import { View, Image, StyleSheet } from "react-native";

function HeaderLogo(props) {
    return(
        <Image style={styles.logoStyles} source={require("../../assets/images/svg/LogoNoTxt.png")}/>
    );
};

const styles = StyleSheet.create({
    logoStyles: {
        height: 40,
        width: 40,
    },
});

export default HeaderLogo

这是堆栈导航器

import React from "react";
import { createStackNavigator } from '@react-navigation/stack';

//Components
import HeaderLogo from "../../components/images/HeaderLogo";

//TopTab
import HomeTopTabNavigator from "../topTab/HomeTopTabNavigator";

//Screens
import AddTasks from "../../screens/home/AddTasks";

//Initialize vars
const Stack = createStackNavigator();

function HomeStackNavigator() {
    return(
        <Stack.Navigator screenOptions={defaultOptions}>
            <Stack.Screen name="Home" component={HomeTopTabNavigator}/>
            <Stack.Screen name="AddTasks" component={AddTasks}/>
        </Stack.Navigator>
    );
};

//Options
const defaultOptions = {
    headerStyle: {
        elevation: 0,
        shadowColor: "transparent",
    },
    //headerTitleAlign: "center",
    headerTitle: (
        <HeaderLogo />
    ),
    headerTitleAlign: "center",
};

export default HomeStackNavigator;

标题上的徽标图像（切掉）

蓝调

只需将组件包装在一个函数中，它就可以正确呈现。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。