React Native Navigation 6 无法在头部添加图片或按钮求助

问题原因 #

你提供的代码中，headerRight的箭头函数没有返回组件，导致按钮无法渲染。箭头函数如果用大括号包裹内容，必须显式写return；若省略大括号则默认返回表达式结果，否则会默认返回undefined，自然不会渲染任何元素。

修正后的头部按钮代码 #

把headerRight里的箭头函数改为返回Button组件，两种写法都可行：

写法一：省略大括号直接返回 #

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        headerTitleAlign: 'center',
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        headerRight: () => (
          <Button
            onPress={() => alert('This is a button!')}
            title="Info"
            color="#fff"
          />
        ),
      }}
    />
  </Stack.Navigator>
</NavigationContainer>

写法二：显式添加return #

headerRight: () => {
  return (
    <Button
      onPress={() => alert('This is a button!')}
      title="Info"
      color="#fff"
    />
  );
},

头部添加图片的示例 #

如果要在头部显示图片，同样遵循返回组件的规则，示例代码如下：

headerRight: () => (
  <Image
    source={require('./assets/your-image.png')} // 替换为你的图片路径
    style={{ width: 30, height: 30, marginRight: 15 }}
  />
)

依赖兼容性说明 #

你的package.json依赖版本（React Native 0.71.2 + React Navigation 6.x）是完全兼容的，修正代码后即可正常显示头部元素。

HomeScreen界面截图：

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