首页 文章

React Native中的FlatList不会从firebase渲染子项

提问于
浏览 次
1

我正在尝试做什么

我正在尝试通过引用他们想要通过密钥评论的帖子向我正在创建的非常基本的社交媒体应用添加评论，然后让用户将他们的评论作为孩子推送到帖子 . 然后，我将使用一个平面列表来呈现所有注释 .

问题

FlatList不呈现任何内容 . 我检查了firebase，并且评论在那里，但是当我尝试运行平面列表时，没有任何渲染 . 我希望得到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中的posts部分 . 渲染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.'
javascript 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;
    回复于

相关问题