Карта с плоским списком Реагирует нативно

#react-native #react-native-flatlist

Вопрос:

я пытаюсь получить представление сообщений с помощью карточки с плоским списком, как я могу расположить несколько элементов моего плоского списка на левом экране справа.

Я хочу, чтобы зеленая карта была в левой части экрана

введите описание изображения здесь

Комментарии:

1. Добро пожаловать. У вас есть пример того, как вы renderItem выглядите и как data это выглядит?

Ответ №1:

Вы можете использовать react-native-gifted-chat для достижения желаемого результата.

 npm install react-native-gifted-chat --save

import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'

export function Example() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://placeimg.com/140/140/any',
        },
      },
    ])
  }, [])

  const onSend = useCallback((messages = []) => {
    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
  }, [])

  return (
    <GiftedChat
      messages={messages}
      onSend={messages => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
  )
}
 

Комментарии:

1. я пытаюсь создать пользовательское приложение для чата без реакции-родной-одаренный-чат. С пакетом одаренного чата все довольно просто.

2. затем вы должны поделиться своим кодом flatlist.