ネイティブベースのカードは、ネイティブベースとFirebaseで動的に反応します。

Question

Firebaseから抽出するデータがあります。それはlistviewで完全にうまく表示されます。しかし、今ではそれらをネイティブベースのカードに表示する必要があります。これは私がhttps://github.com/GeekyAnts/NativeBase/issues/347しようとしたコードですが、私はエラーを取得：未定義のは、私が使用したコードだオブジェクト

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

はありませんが、私は画像のようなエラーを取得しておきます私はコンソールで見ることができるので、すべての項目は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}/> 
     ); 
    } 

Answer 1

ネイティブベースのdocとして、dataArrayとren 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> 
    ) 
} 

Answer 2

あなたがあなたのカードにおいて別途をしたい場合、あなたはカードではなく、CardItemでキー属性を配置する必要があります！

render() { 

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