Native Base 的卡片在原生和 Firebase 中动态反应

Question

我有要从 Firebase 中提取的数据，我做到了。它在列表视图中显示得非常好。但现在我必须将它们显示在原生基地的卡片中。这是我试过的代码 https://github.com/GeekyAnts/NativeBase/issues/347 但我得到一个错误：undefined is not an object

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

在尝试 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 不支持 Card 组件。所以应该更新你的渲染函数。

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

如果你想要你的卡片 SEPARATELY ，你需要将 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>
    )
}

Native Base 的卡片在原生和 Firebase 中动态反应

Cards of Native Base dynamically in react native and Firebase

react-native

firebase-realtime-database

native-base