Как определить порядок отображения сообщений в React Native Gifted Chat?

Мне интересно, как я могу определить порядок вывода сообщений?

Сначала я думал, что он будет использовать объект createdAt Date для определения рендеринга, но это не так.

(Как вы видите, он не отображается на основе даты (сначала 2019, 2018, 2017, 2016 и снова 2019)

Как видите, рендеринг не основан на дате (сначала 2019, 2018, 2017, 2016 и снова 2019)

Мне интересно, как я могу исправить порядок, чтобы сначала показывались самые новые сообщения. Мой исходный массив сообщений выглядит так:

const [messages, setMessages] = useState([
    {
      _id: 'gdfsdfasdfasdfasdfas',
      text: 'Test Test 2',
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 1)),
      user: {
        _id: 2,
        name: 'React Native',
        avatar: 'https://placeimg.com/140/140/any',
      },
    },
    {
      _id: 'aereraesaresraesraes',
      text: 'Test Test',
      createdAt: new Date(Date.UTC(2017, 5, 11, 17, 20, 1)),
      user: {
        _id: 2,
        name: 'React Native',
        avatar: 'https://placeimg.com/140/140/any',
      },
    },
    {
      _id: 'dasfadsfdfasfadasdasd',
      text: 'What\'s up ;)',
      createdAt: new Date(Date.UTC(2018, 5, 11, 17, 20, 1)),
      user: {
        _id: 2,
        name: 'React Native',
        avatar: 'https://placeimg.com/140/140/any',
      },
    },
    {
      _id: 'dasdasfdasfdasf',
      text: 'Hello developer',
      createdAt: new Date(Date.UTC(2019, 5, 11, 17, 20, 1)),
      user: {
        _id: 'ewrqqewrewrqrqewrewq',
        name: 'React Native',
        avatar: 'https://placeimg.com/140/140/any',
      },
    },
  ]);

person Ramon Vermeulen    schedule 23.09.2019    source источник
comment
Вы нашли решение этого вопроса?   -  person Dilroop Singh    schedule 19.01.2020


Ответы (1)


Для меня эта проблема тоже была настоящей болью. Наконец-то я заставил это работать. Поскольку у вас уже есть createdAt новый формат даты JS, вам просто нужно отсортировать массив. react-native-gifted-chat по умолчанию этого не делает. Поэтому, прежде чем устанавливать состояние, используйте приведенный ниже метод сортировки, чтобы отобразить чат с правильной структурой.

data.sort((a, b) => b.createdAt - a.createdAt)
person Shreyak Upadhyay    schedule 25.07.2020