React Native中如何为页面头部添加自定义标题与右侧按钮？（解决route.params未定义错误）

嘿，我明白你遇到的问题了！你出错的核心原因是把options写成了普通对象，而不是一个能接收route参数的函数，而且headerTitle的写法也不对。咱们来一步步修正：

错误原因分析 #

你修改后的代码里，options是一个直接包含headerTitle和headerRight的对象，但headerTitle函数里的route是找不到的——因为route参数只有当options本身是一个函数时，才能被传递进来。原来的正确写法是把options设为函数来获取route，但你修改后改成了普通对象，自然就拿不到route.params了。

正确实现代码 #

下面是两种正确的写法，根据你的需求选一种就行：

写法1：直接用学生姓名作为标题 #

如果只是要显示学生姓名作为标题，直接把headerTitle设为route.params.name就好：

<Stack.Screen 
  name="Profile" 
  component={ProfileScreen} 
  options={({ route }) => ({
    // 直接从route参数里获取学生姓名作为标题
    headerTitle: route.params.name,
    // 添加右侧按钮
    headerRight: () => (
      <Button 
        onPress={() => alert('This is a button!')} 
        title="Info" 
        color="#fff" 
      />
    )
  })} 
/>

写法2：自定义标题组件（如果需要更复杂的标题样式） #

如果你需要给标题加样式或者自定义渲染内容，可以把headerTitle写成一个组件函数：

<Stack.Screen 
  name="Profile" 
  component={ProfileScreen} 
  options={({ route }) => ({
    headerTitle: () => (
      // 这里可以自定义标题的样式，比如加大字号、改颜色
      <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#fff' }}>
        {route.params.name}
      </Text>
    ),
    headerRight: () => (
      <Button 
        onPress={() => alert('This is a button!')} 
        title="Info" 
        color="#fff" 
      />
    )
  })} 
/>

额外建议：处理参数可能不存在的情况 #

为了避免如果route.params不小心没传导致的报错，可以加个默认值：

headerTitle: route.params?.name || '学生资料',

这样就既能正确显示学生姓名作为标题，又能在头部右侧添加按钮啦！

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