[英]Why is the data from Firebase not rendering in my FlatList (React Native)?
[英]FlatList in React Native isn't rendering children from firebase
我試圖通過按鍵引用他們要評論的帖子,然后讓用戶將其評論作為孩子推送到帖子中,從而向正在創建的一個非常基本的社交媒體應用程序中添加評論。 然后,我將使用一個平面列表來呈現所有評論。
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中的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.'
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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.