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

Question

我在从 firebase 渲染数据时遇到问题。

这是我目前在 firebase 上的数据结构： {名称：“睡眠”} IE。这是数据库包含 atm 的唯一对象。 使用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)
    });
  });
}

Answer 1

您需要为您的 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> ); 
  } 
}