FlatList в React Native не рендерит детей из firebase

1

Что я пытаюсь сделать

Я пытаюсь добавить комментарии к очень основному социальному медиа-приложению, которое я создаю, ссылаясь на сообщение, которое они хотят прокомментировать, по ключевому слову, а затем пользователь нажимает свои комментарии на сообщение в качестве детей. Затем я буду использовать плоский список, чтобы отобразить все комментарии.

проблема

FlatList ничего не делает. Я проверил на firebase, и комментарии там, но когда я пытаюсь запустить flatlist, ничего не делает. Мне хотелось бы помочь получить FlatList для рендеринга!

Мой код

Получение комментариев от firebase:

getItems(){
var items = [];
var query = ref.child(this.state.passKey).orderByKey();
query.once ('value', (snap) => {
  snap.forEach ( (child) => {       
   items.push({
     comment: child.val().comment,
 });
 });
}).then(() => {
    this.setState({firebaseItems: items});
});
}

passKey является ключом к сообщению в качестве строки. ref просто ссылается на раздел сообщений в моей firebase. Отображение FlatList:

 <FlatList>
    data = {this.state.firebaseItems}
renderItem={({ item, index }) => 
 <View>
            <View style={{width: parseInt(this.state.postWidth), height: ((item.content.length/3)*2 + 60), backgroundColor: '#ffffff',  alignItems: 'center', justifyContent: 'center', paddingLeft: 10, paddingRight:10, borderRadius:5}}>
        <Text style={{fontSize: 18, color: '#000000', textAlign: 'center'}}>
                    { item.comment }
                </Text>
            </View>
      <View style={{width: 1, height: 4, backgroundColor: '#e8e8e8'}} />
   </View>
  }
</FlatList>

И макет моей базы:

posts:
  -Kzrip74SH7430djfS:
     content: 'This is a post. Above me is a random key example'
     -KzGh589sjSJfjjds:
        comment: 'this is a comment example. The key for the comment is nested at the same level as the content.'
     -Kz5ghSr8uerSvjrnd:
        comment: 'this is another comment.'
  -Kzwehhherhwpgi:
     content: 'this is another post.'
  • 0
    data и renderItems являются свойствами FlatList. Поместите их в свой тег FlatList.
  • 0
    @ Адам Кипинс Я не понимаю, что вы имеете в виду. Я помещаю их в мой тег flatlist. Я не знаю, показывалось ли это в приведенном выше коде, но я дважды проверил, так что теперь он показывает, что они есть в теге.
Показать ещё 4 комментария
Теги:
firebase
react-native
firebase-realtime-database

1 ответ

0
Лучший ответ
import React, { Component } from 'react';
import { FlatList, View, Text } from 'react-native';
import * as firebase from 'firebase/app';

class MessageList extends Component {
  constructor(props) {
    super(props);
    this.state = { firebaseItems: {} };
  }

  componentWillMount() {
    this.getItems();
  }

  getItems = () => {
    var items = [];

    firebase.database().ref('/posts').orderByKey().on('value', (snap) => {
      snap.forEach((child) => {
        items.push({
                     comment: child.val().comment,
                   });
      });
      this.setState({firebaseItems: items})
    }, error => console.log(error));
  };

  renderRow = ({item, index}) => {
    return (
        <View style={{
          width: 100,
          height: ((item.length / 3) * 2 + 60),
          backgroundColor: '#ffffff',
          alignItems: 'center',
          justifyContent: 'center',
          paddingLeft: 10,
          paddingRight: 10,
          borderRadius: 5
        }}>
          <Text style={{
            fontSize: 18,
            color: '#000000',
            textAlign: 'center'
          }}>
            {item.comment}
          </Text>
        </View>
    );
  };

  render() {
    return (
        <FlatList data={this.state.firebaseItems}
                  renderItem={this.renderRow}/>
    );
  }
}

export default MessageList;
  • 0
    Хм ... это не сработало. Я думаю, что проблема с getItems (); функция, а не flatList. Я не думаю, что я получаю данные правильно, но я не знаю, что не так.
  • 0
    Похоже, что item.content.length был причиной проблемы. Я смог заставить ваш код работать (жестко запрограммировал пару вещей, которых у меня не было в моем состоянии, но вы должны быть в состоянии настроить мою версию). Обновил ответ с моей версией.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню