React Native使用moment.js时AM/PM时间格式显示异常问题

问题现象 #

使用moment.js生成带AM/PM标识的时间格式时，开始时间与结束时间格式化后均显示为AM，预期结束时间应正确显示为PM。

相关业务代码 #

return (
  <ScrollView style={[GlobalStyle.CustomScrollView]}>
    <HeaderBar3/>
    <Text style={[GlobalStyle.EventTitle]}> Event Details</Text>
    <View style={[GlobalStyle.EventDetailView]}>
      <Image style={[GlobalStyle.EventDetailImage]} source={{uri: eventData.main_image}} resizeMode="contain"/>
      <Text style={[GlobalStyle.EventSubtitle]}>Date:</Text>
      <Text style={[GlobalStyle.EventDate]}>{moment(eventData.starts_on).format('DD MMMM YYYY')}</Text>
      <Text style={[GlobalStyle.EventTime]}>{moment(eventData.starts_on).format('hh:mm A')} {'-'} {moment(eventData.ends_on).format('hh:mm A')}</Text>

接口返回数据参考 #

根因定位 #

异常本质是时区解析错误：接口返回的时间为UTC标准时间，直接调用moment(timeStr)解析时，moment会默认将时间转换为设备本地时区做计算，如果本地时区偏移后刚好把结束时间的小时数折算到上午区间，就会错误显示AM。

修复方案 #

• 若业务要求直接展示接口返回的标准时间，不做本地时区转换，直接使用moment.utc()方法按UTC时区解析时间，跳过本地时区自动转换即可：

<Text style={[GlobalStyle.EventTime]}>
  {moment.utc(eventData.starts_on).format('hh:mm A')} 
  {'-'} 
  {moment.utc(eventData.ends_on).format('hh:mm A')}
</Text>

• 若业务要求按本地时区展示时间，可以在解析时显式指定时间字符串的格式，开启严格解析模式，避免moment自动识别格式时出现误判：

// 按接口实际返回的时间格式替换第二个参数的格式串
moment(eventData.ends_on, 'YYYY-MM-DD HH:mm:ss', true).format('hh:mm A')

• 排查阶段可先加日志确认解析结果：执行console.log(moment(eventData.ends_on).hour())查看解析后的小时值，确认是否和接口返回的小时值一致，快速定位是否为解析环节错误。

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