React Native：修复Unexpected token错误及日期AM/PM判断失效问题

• 语法错误根源：你写的三元表达式完全不符合JSX语法规范：

  • 错误用括号包裹{item.date}，导致解析器识别到非法token
  • 没有针对小时数做判断，直接用date作为条件（它不是布尔值）
  • 字符串拼接逻辑错误，没有用引号或模板字符串包裹文本

• 正确实现逻辑：

  1. 从日期中提取小时数（支持Date对象或字符串格式的小时）
  2. 判断小时数：小于12显示AM，大于等于12显示PM
  3. 处理12点特殊情况（12点显示12 AM，24点显示12 PM）

• 修复后的代码示例：
  若item.date是Date对象：

  <Text>
    {item.date ? (
      (() => {
        const hour = item.date.getHours();
        const formattedHour = hour % 12 === 0 ? 12 : hour % 12;
        return `${formattedHour} ${hour < 12 ? 'AM' : 'PM'}`;
      })()
    ) : ''}
  </Text>
  

  若item.date是字符串格式的小时（如"9"、"15"）：

  <Text>
    {item?.date ? (
      (() => {
        const hour = parseInt(item.date, 10);
        const formattedHour = hour % 12 === 0 ? 12 : hour % 12;
        return `${formattedHour} ${hour < 12 ? 'AM' : 'PM'}`;
      })()
    ) : ''}
  </Text>
  

• 简化写法（React 16.8+）：
  可以把逻辑抽成函数，让代码更清晰：

  const formatTime = (date) => {
    if (!date) return '';
    const hour = typeof date === 'string' ? parseInt(date, 10) : date.getHours();
    const formattedHour = hour % 12 === 0 ? 12 : hour % 12;
    return `${formattedHour} ${hour < 12 ? 'AM' : 'PM'}`;
  };
  
  // 组件内使用
  <Text>{formatTime(item?.date)}</Text>
  

内容的提问来源于stack exchange，提问作者Thanh Nhan Do