我如何使用 React 本机 Flatlist 实现类似 whatsapp 聊天 ui 的 UI 显示日期

【问题标题】：How can i achieve a UI like whatsapp chat ui where dates are showing using React native Flatlist我如何使用 React 本机 Flatlist 实现类似 whatsapp 聊天 ui 的 UI 显示日期
【发布时间】：2022-11-07 17:30:08
【问题描述】：

如何实现像whatsapp这样的聊天用户界面，其中日期显示在消息中间，我得到一个带有时间戳的消息对象数组，我显示消息但无法显示日期，如whatsapp，这里我在react native中使用了Flatlist，请帮助我实现这一目标..

【问题讨论】：

标签： react-native chat whatsapp react-native-flatlist

【解决方案1】：

在您的 renderItem 函数中放置以下标记：

const renderItem = useCallback(({ item }) => (
  <View style={{flexDirection: 'column'}}>
    <View>
      <Text>{item.message}</Text>
    </View>
    <View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
      <Text>{item.timestamp}</Text>
    </View>
  </View>)
)

【讨论】：