Karten von Native Base dynamisch reagieren in nativen und Firebase

Question

Ich habe Daten aus Firebase zu extrahieren und ich tat. Es wird in einer Listenansicht perfekt angezeigt. Aber jetzt muss ich sie in Karten von der Heimatbasis aus anzeigen. Dies ist der Code habe ich versucht https://github.com/GeekyAnts/NativeBase/issues/347, aber ich erhalte eine Fehlermeldung: nicht definiert ist kein Objekt

import CardItem from'./CardItem' 
import {Container, Content, Card, Body, Title} from 'native-base'; 
export default class SixteenTab extends Component { 

    constructor(props) { 
     super(props); 
     this.itemsRef = this.getRef().child('docs/topics/topics_2016/'); 
    } 

    componentDidMount() { 
     // start listening for firebase updates 
     this.listenForItems(this.itemsRef); 
    } 
    getRef() { 
     return firebaseApp.database().ref(); 
    } 
    listenForItems(itemsRef) { 
     itemsRef.on('value', (snap) => { 
      var items = []; 
      snap.forEach((child) => { 
       items.push({ 
        title: child.val().title, 
        _key: child.key 
       }); 
      }); 
      this.setState({ 
       items: items 
      }); 
     }); 
    } 

    render() { 

     return (
      <View> 
       <Card dataArray={this.state.items} 
         renderRow={(item) => this._renderItem(item)}> 
       </Card> 
      </View> 
     ) 
    } 

    _renderItem(item) { 

     return (
      <CardItem item={item}/> 
     ); 
    } 


} 

CardItem Seite

class CardItem extends Component { 
    render() { 
     return (
      <View style={styles.listItem}> 
       <Text style={styles.liText}>{this.props.item.title}</Text> 

      </View> 
     ); 
    } 
} 

, dass der Code ist i verwendet, aber ich halte einen Fehler wie das Bild bekommen unten -> keine Idee bitte PS: alle Elemente wurden aus Firebase-Datenbank korrekt extrahiert, da ich sie in der Konsole

sehen können

nach dieser Zeile this.state = { items: [] }; im Konstruktor setzen, bekomme ich diese Warnung

wenn die zweite Methode von Irfan versucht, bekomme ich diese Warnung und nichts auf dem Bildschirm angezeigt werden

, das ist das letzte, das ich schrieb und immer noch nicht funktioniert

export default class SixteenTab extends Component { 

    constructor(props) { 
     super(props); 
     this.itemsRef = this.getRef().child('docs/topics/topics_2016/'); 
     this.state = { items: null }; 

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

       items:[] 
      }); 

    } 
    getRef() { 
     return firebaseApp.database().ref(); 
    } 
    listenForItems(itemsRef) { 
     itemsRef.on('value', (snap) => { 
      var items = []; 
      snap.forEach((child) => { 
       items.push({ 
        title: child.val().title, 
        _key: child.key 
       }); 
      }); 
        this.setState({ 
       items: items 
      }); 
     }); 

    } 

    render() { 

     return (
      <View> 
       <Content> 
        <Card> 
         { 
          this.state.items.map((item,index)=>{ 
           return (
            <CardItem key={index}> 
             <View> 
              <Text>{item.title}</Text> 
             </View> 
            </CardItem> 
           ) 
          }) 
         } 
        </Card> 
       </Content> 

      </View> 
     ) 
    } 

    _renderItem(item) { 

     return (

      <ListItem item={item}/> 
     ); 
    } 

Answer 1

Wie native Basis doc, DataArray und Ren DerRow unterstützt keine Kartenkomponente. Also sollten Sie Ihre Renderfunktion aktualisieren.

render() { 

    return (
     <Container> 
     <Content> 
      <Card> 
       { 
        this.state.items.map((item, index)=>{ 
         return (
          <CardItem key={index}> 
           <View> 
            <Text>{item.title}</Text> 
           </View> 
          </CardItem> 
         ) 
        }) 
       } 
      </Card> 
     </Content> 
     </Container> 
    ) 
} 

Answer 2

Wenn Sie Ihre Karten wollen SEPARAT, müssen Sie das Schlüsselattribut in-Karte setzen, nicht in CardItem! Wie folgt aus:

render() { 

    return (
     <Container> 
     <Content> 
      { 
      this.state.items.map((item, index)=>{ 
       return (
        <Card key={index}> 
        <CardItem> 
         <Text>{item.title}</Text> 
         </CardItem> 
        <Card/> 
       ) 
       }) 
      } 
     </Content> 
     </Container> 
    ) 
}