Реагировать на собственный источник данных ListView с Firebase

Я пытаюсь перечислить элементы базы данных Firebase в режиме реального времени в моем React Native ListView. Однако со следующим кодом я получаю сообщение об ошибке, говорящее, что «неопределенный не является конструктором», когда я инициализирую состояние 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>
    );
}

react-native firebase listview firebase-realtime-database react-native-listview
person thousight    schedule 07.11.2016    source источник
comment
Пожалуйста, опубликуйте код компонента. Определение класса   -  person Jickson    schedule 07.11.2016
comment
firebaseApp передается через реквизит как PT.object, в остальном все в порядке.   -  person thousight    schedule 13.11.2016
comment
Вы нашли решение?   -  person Jickson    schedule 13.11.2016
comment
Нет, все еще жду один   -  person thousight    schedule 14.11.2016
comment
может быть, это потому, что datasource и renderrow должны быть в верблюжьем корпусе, например: dataSource и renderRow в <ListView dataSource={...} renderRow={...}   -  person Ivan Chernykh    schedule 04.12.2016

Ответы (3)


arrow_upward
0
arrow_downward

Да @Чернов прав, должно быть renderRow и dataSource под компонентом представления списка.

person Raj Vansia    schedule 20.01.2017

arrow_upward
0
arrow_downward

может ты попробуешь~

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": ""
    }
  }
}
person 創意幾兩重    schedule 23.01.2017

arrow_upward
0
arrow_downward

Это работает для простых данных.

Это мой конструктор:

 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>
    );
  }
person Yavuz ÇAYLI    schedule 28.07.2017