react-native - Native Base 的卡片动态响应原生和 Firebase

Question

我有数据要从 Firebase 中提取，我做到了。它在列表视图中显示得非常好。但是现在我必须在本地基础的卡片中显示它们。这是我尝试过的代码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}/>
        );
    }


} 

卡片项目页面

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: [] };放入构造函数后，我收到此警告

尝试 Irfan 的第二种方法时，我收到此警告，屏幕上没有显示任何内容

那是我写的最后一个，但仍然无法正常工作

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

根据原生基础文档，dataArray 和 renderRow 不支持卡片组件。所以应该更新你的渲染功能。

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

如果您想要单独的卡片，则需要将 key 属性放在 Card 中，而不是 CardItem 中！像这样：

render() {

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