Question

我很难理解如何从Firebase显示数据和图像。我有数据存储在Firebase＆gt;数据库＆gt;用户..我对用户感兴趣的列是FirstName和Email，以便在列表视图中显示。另外，如何从Firebase显示图像＆gt;存储

这是代码。现在显示一个空白的白色屏幕。我想做的是：

从Firebase显示用户（FirstName，电子邮件）＆gt;数据库＆gt;用户和
对其进行扩展以显示用户在Firebase中上传的图片＆gt;存储

为了给出一个想法，我在这里显示用户的JSON导出。感谢任何帮助。谢谢！

   import React, { Component } from 'react';
    import {
      AppRegistry,
     StyleSheet,
     Text,
     TextInput,
     View,
     Image,
     TouchableHighlight,
     Button,
     ListView,
     ToolbarAndroid
  } from 'react-native';
 import * as firebase from 'firebase';
 import ListItem from './ListItem.js';
 const FbApp = require('./FbApp.js');   // firebase constants

 export default class DisplayFirebaseImages extends Component {

  constructor(props){
        super(props);
        this.tasksRef = firebase.database().ref();
        const dataSource = new ListView.DataSource({
                                               rowHasChanged: (row1, row2) => row1 !== row2,
                                               });
        this.state = {
        dataSource: dataSource
        };
}

componentDidMount() {
    this.listenForTasks(this.tasksRef);
}

render() {

    return (
            <View>
                <ListView>
                dataSource={this.state.dataSource}
                enableEmptySections={true}
                renderRow={this._renderItem.bind(this)}
                </ListView>
                </View>
                );
         }

      _renderItem(task) {
      return (
            <ListItem task={task} onTaskCompletion={onTaskCompletion} />
              );
   }

   // start listen
listenForTasks(tasksRef) {
    tasksRef.on('value', (dataSnapshot) => {
                var tasks = [];
                dataSnapshot.forEach((child) => {
                                     tasks.push({
                                                name: child.val().name,
                                                _key: child.key
                                                });
                                     });

                this.setState({
                              dataSource: this.state.dataSource.cloneWithRows(tasks)
                              });
                });
}
// end listen    
}


  AppRegistry.registerComponent('DisplayFirebaseImages', () =>     DisplayFirebaseImages);


ListItem.js
 import React, {Component} from 'react';
 import {
     View,Text,Image
        } from 'react-native';
    import styles from './styles.js';

    class ListItem extends Component {
     render() {
   return (
         <View style={styles.listItem}>
         <Text style={styles.listItemTitle}>
           {this.props.FirstName}
          </Text>
         </View>
    );
  }
 }

module.exports = ListItem;

  Users:
   {
     "users" : {
        "Xdsjkwjy!122" : {
            "Email" : "myemail@hotmail.com",
            "FirstName" : "Jack",
            "LastName" : "Smith",
            "MobileNumber" : "",
            "NickName" : "Jack",
            "profile_picture" : ""
        }
     }
   }

将本机显示图像作为Firebase

0 个答案: