listview - 使用 Firebase 反应原生 ListView 数据源

Question

我正在尝试在我的 React Native ListView 中实时列出我的 Firebase 数据库项目。但是，使用以下代码，当我在构造函数中初始化 dataSrouce 状态时，我收到一条错误消息，指出“未定义不是构造函数”。我应该怎么做才能让它工作？谢谢。

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

componentDidMount() {
    this.listenForItems(this.itemsRef);
}

renderItem(item) {
    return (
      <TouchableHighlight>
        <View>
          <Text>{item.name}</Text>
        </View>
      </TouchableHighlight>
    )
}

listenForItems(itemsRef) {
    itemsRef.on('value', snap => {
      var items = [];
      snap.forEach((child) => {
        items.push({
          name: child.val().name,
          description: child.val().description,
          dateID: child.val().dateID,
          schema: child.val().schema,
          _key: child.key
        });
      });

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

render() {

    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
     TouchableElement = TouchableNativeFeedback;
    }

    return (
      <View style={styles.container}>
        <ListView
          datasource={this.state.dataSource}
          renderrow={this.renderItem.bind(this)} />
      </View>
    );
}

Answer 1

或许你可以试试~

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

componentDidMount() {
    this.listenForItems(this.itemsRef);
}

listenForItems(itemsRef) {
    itemsRef.on('value', snap => {
      var items = [];
      snap.forEach((data) => {
        items.push({
          name: data.val().name,
          description: data.val().description,
          dateID: data.val().dateID,
          schema: data.val().schema,
          _key: data.key
        });
      });

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

render() {

    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
     TouchableElement = TouchableNativeFeedback;
    }

    return (
      <View style={styles.container}>
        <ListView
          datasource={this.state.dataSource}
          renderrow={this.renderItem.bind(this)} />
      </View>
    );
}

renderItem(items) {
    return (
      <TouchableHighlight>
        <View>
          <Text>{items.name}</Text>
        </View>
      </TouchableHighlight>
    )
}

结构数据示例

{
  "test": {
    "postKey or userId here": {
      "name": "...",
      "description": "",
      "dateID": "",
      "schema": ""
    }
  }
}

Answer 2

这适用于简单数据。

这是我的构造函数：

 constructor(props) {
    super(props);
    var firebase = Firebase.database().ref();
    this.FirebaseRef = firebase.child('Users');
    this.state = {
        IsValid: false,
        Name: "",
        Post: {
            PostText: "",
            postUri: ""
        },
        Surname: "",
        uri: "",
        DataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 != row2
        })
    }
    this.items = [];
  }

我填写我listviewDataSource的

  componentDidMount() {
    this.FirebaseRef.on('child_added', (dataSnapshot) => {
        this.items.push({
            id: dataSnapshot.key,
            IsValid: true,
            Name: dataSnapshot.val().Name,
            PostText: dataSnapshot.val().PostText,
            postUri: dataSnapshot.val().postUri,
            Surname: dataSnapshot.val().Surname,
            uri: dataSnapshot.val().uri
        });
        this.setState({
            DataSource: this.state.DataSource.cloneWithRows(this.items)
        });
    });

和我的renderRow

 renderRow(rowData) {
    return (
      <ScrollView ContainerStyle={styles.ScrollView}>
        <Text>{rowData.Name} {rowData.Surname}</Text>
        <Image source={{ uri: String(rowData.uri) }} style={styles.Photo} />
        <Text>{rowData.PostText}</Text> 
        <Text>{rowData.postUri}</Text> 
        <Image source={{ uri: String(rowData.postUri) }} style={styles.postPhoto} /> // I can not reach my post Uri
        </ScrollView>
    );
  }

Answer 3

是的@Cherniv 是对的renderRow，它应该dataSource在列表视图组件下。