如何从react-native访问firebase中的数据?

时间:2017-06-02 15:17:34

标签: reactjs firebase react-native

我无法从firebase渲染数据。

这是我在firebase上的当前数据结构: {name:" sleep"} 即。这是数据库包含atm的唯一对象。 使用ListView,它呈现一行(根据数据库中的项目数显示行的背景和边框),但是行内没有文本..

ListView代码:

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

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

ListItem的代码:

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

用于监听任务的代码

listenForTasks(tasksRef) {
  tasksRef.on('value', (dataSnapshot) => {
    var tasks = [];

    dataSnapshot.forEach((child) => {
      tasks.push({
        name: child.val().name,
        _key: child.key
      });

console.log(dataSnapshot.val()); // returns JSON object of {name: 'sleep'}
console.log(tasks); // returns an array containing the object of {name: 'sleep'}
console.log(dataSnapshot.val().name); // returns 'sleep'

    });

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

1 个答案:

答案 0 :(得分:0)

您需要为ListItem组件设置构造函数:

class ListItem extends Component {

//Add this....
constructor(props){
   super(props)
}
//--------------

  render() { 
     return ( <View style={styles.listItem}>
        <Text style={styles.listItemTitle>
        {this.props.task.name}
        </Text>
      </View> ); 
  } 
}