React Navigation中如何在标题为空字符串时设置默认标题？

我完全懂你的需求——navigation.getParam('Title', 'Default Title')只会在参数是undefined的时候才触发默认值，但你的场景里参数永远不会是undefined，只会是空字符串''，这时候默认标题就失效了。而且虽然你已经做了redux参数加载完成再渲染的处理，但还是想要个兜底方案以防意外，对吧？

解决方案：手动判断空字符串 #

我们可以在获取参数后加一层额外判断，当参数是空字符串时就使用默认标题，否则用实际参数。这里有两种写法，你可以根据场景选择：

1. 严谨判断（仅针对空字符串）

这种写法只会在参数确实是空字符串时触发默认值，其他任何非空值（比如数字、布尔值等）都会正常保留，安全性更高：

// 获取参数，默认值设为空字符串（因为你的参数永远不会是undefined）
const rawTitle = navigation.getParam('Title', '');
// 判断空字符串，替换为默认标题
const screenTitle = rawTitle === '' ? 'Default Title' : rawTitle;

2. 简洁写法（适配你的特定场景）

因为你提到参数要么是正常标题要么是空字符串，不会有其他 falsy 值（比如0、false），那可以用更简洁的逻辑或运算符：

const screenTitle = navigation.getParam('Title', '') || 'Default Title';

这里的逻辑是：如果参数是空字符串（属于falsy值），就会取后面的默认标题；如果是正常的非空字符串，就直接使用参数值。

在组件中的完整示例 #

把这个逻辑放到你的页面组件里，大概是这样：

import React from 'react';
import { View, Text } from 'react-native';

function YourTargetScreen({ navigation }) {
  // 用上面任意一种方式获取处理后的标题
  const rawTitle = navigation.getParam('Title', '');
  const screenTitle = rawTitle === '' ? 'Default Title' : rawTitle;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{screenTitle}</Text>
      {/* 页面其他内容 */}
    </View>
  );
}

export default YourTargetScreen;

为什么这个方案可行？ #

原来的getParam方法默认值逻辑是：只有当指定参数**不存在（即navigation.state.params里没有这个key）或者值为undefined**时，才会返回第二个参数作为默认值。但你的参数永远不会是undefined，只会是空字符串，所以必须额外判断空字符串的情况，这层判断就作为你的兜底方案，即使redux加载出现异常导致参数为空，也能保证页面显示合理的标题。

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