React-native header 标题图像被切断，为什么？答案

【问题标题】：React-native header title image is cut off, why?React-native header 标题图像被切断，为什么？
【发布时间】：2020-07-25 08:56:59
【问题描述】：

所以我正在开发一个 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;

Image of Logo on the header (cut off)

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

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

【讨论】：

【解决方案2】：

为了后代：

headerTitle: () => <HeaderLogo />

【讨论】：