如何从 Flatlist 中的 firebase 实时数据库中检索所有数据用户照片?

时间:2021-05-24 14:49:05

标签: firebase react-native firebase-realtime-database firebase-authentication react-native-flatlist

我无法使用 React Native 将我的 firebase 实时数据库中的所有用户照片(不是当前用户)渲染到 Flatlist。 我可以使用函数 firebase.database().ref('users').once('value') 检索所有用户数据并将这些数据放入一个列表中,但我不确定如何为此创建一个平面列表。我从下面的代码在模拟器中得到一个空白屏幕。我是使用 React Native 的初学者。有人可以帮忙吗?以下是我为用户提供的代码和数据库结构。

   export default class UniBoardScreen extends PureComponent {

   constructor(props) {
   super(props);
   this.state = {
     boardPosts: [],
   };

   var that = this;
  
firebase.database().ref(`users`).once(`value`).then(function(snapshot) 
  {
    that.setState({
    boardPosts:  snapshot.val(),
    });
  });
}
                                  

renderPost = post => {
   return (
  <TouchableOpacity>

<View >
  <Image source={{uri: post.board_cover_photo.sourceURL}} style={{ 
    margin:1, width:123, height:123, bottom:0 }}/>
</View>

  </TouchableOpacity>
   )
};

render() {

return (
 <View >
 <FlatList 
    style={styles.feed} 
    data={this.state.boardPosts}
    renderItem={({item}) => this.renderPost(item)}
    keyExtractor={item => item}
    showsVerticalScrollIndicator={false}
    numColumns={numColumns} 
 />
 </View>
   );
}

}

firebase 数据库中的用户:

enter image description here

enter image description here

0 个答案:

没有答案
相关问题