本机基地卡动态地反应原生和Firebase

问题描述：

我有数据从Firebase中提取，我做过。它在列表视图中显示得非常好。但现在我必须从本地基地向他们展示他们的卡片。这是我试图https://github.com/GeekyAnts/NativeBase/issues/347代码，但我得到一个错误：未定义不是对象本机基地卡动态地反应原生和Firebase

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页

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

      </View> 
     ); 
    } 
}

这是我使用的代码，但我不断收到类似的图像错误下面 - >任何想法请 PS：所有的项目都是从firebase数据库中正确提取的，因为我可以在控制台中看到它们

把这个线this.state = { items: [] };在构造后，我得到这样的警告

试图伊尔凡的第二种方法时，我得到这样的警告并没有显示在屏幕

这我写的，最终仍然没有工作

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}/> 
     ); 
    }

答

按天然碱基DOC，dataArray中的任derRow不支持卡组件。所以应该更新你的渲染功能。

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> 
    ) 
}

嗨伊尔凡，谢谢你，但我得到一个警告现在..请我在这个问题上面所做的编辑和抱歉打扰你，你 – user3521011

必须具有唯一键CardItem组件这样 –

Irfan再次感谢你..但仍然空白页..我应该编辑我的问题，并发布整个代码？ – user3521011

答

如果你想你的卡另行，你需要把关键属性的卡，而不是在CardItem！就像这样：

render() { 

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

本机基地卡动态地反应原生和Firebase

相关推荐