React Navigation配置headerTitle时自定义HomeHeader组件不渲染如何解决

问题原因 #

headerTitle 属性接收的是React元素或者接收props并返回React元素的渲染函数，你当前直接传入了组件构造函数本身，没有进行实例化，因此无法正常渲染。

修复方案 #

你可以选择以下任意一种写法修改Stack.Screen的options配置：

方案1：直接传入实例化后的组件 #

如果你的自定义Header不需要接收导航框架自动传入的tintColor、style等头部相关props，直接写为：

<Stack.Screen 
  name="Home" 
  component={HomeScreen} 
  options={{headerTitle: <HomeHeader />}} 
/>

方案2：用渲染函数包裹（推荐，兼容props传递） #

如果后续需要用到导航传递的头部属性，用箭头函数接收props再透传给组件：

<Stack.Screen 
  name="Home" 
  component={HomeScreen} 
  options={{
    headerTitle: (props) => <HomeHeader {...props} />
  }} 
/>

额外注意 #

如果修改后还是出现内容显示不全、偏移的情况，可以给你的HomeHeader根节点View添加适配头部的样式，比如设置对齐方式、最大宽度：

const HomeHeader = (props) => {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <Text>Home</Text>
    </View>
  )
}

内容的提问来源于stack exchange，提问作者Esore