Question

目标：我一直在努力展示来自火店的日期清单，我可以在控制台日志中获取这些数据，请参考图片：

现在我已经完成了很多方法，比如使用平面列表：

   return (
            <FlatList
              data={data}
              renderItem={(item, index) => <Text key={item}>{index}</Text>}
            />
       )

使用.map：

data.map((data, index) => {
    return (
      <Text key={index}>{data}</Text>
    );
 })

使用object.keys：

  Object.keys(data).map(i => {
        console.log(i);
        return(
          <Text>{i}</Text>
        )

      });

代码段：

import React, { Component } from 'react';
import {
   Container,
   Text,
   Card,
   CardItem,
   Right
  } from 'native-base';
import { StyleSheet, FlatList, ScrollView } from 'react-native';
import AppHeader from '../components/AppHeader';
import IconFooter from '../components/IconFooter';
import ShopTab from '../components/shop/ShopTab';
import * as actions from '../actions';
import { connect } from 'react-redux';
import Config from '../config/config.js'
import  firebase from 'react-native-firebase';
import '@firebase/firestore';
import _ from 'lodash';

class checkInHistoryScreen extends Component {
  constructor(props) {
  super(props);
  this.state = {
    shopId: '',
    checkInHistory: '',
  };
}

componentDidUpdate(){
  const user = firebase.auth().currentUser;
  if (user != null) {
    const db = firebase.firestore();

    const docRef = db.collection("userCheckInHistory").doc(user.uid);
      docRef.get().then((doc) => {
          if (doc.exists) {
            let shopId = this.props.shopId
            let userShopHistoryData = doc.data();
            let userShopPick = userShopHistoryData[shopId];
              if(this.state.shopId !== this.props.shopId){
                this.setState({
                 checkInHistory: userShopPick,
                 shopId: this.props.shopId
                });
              }
          } else {
              console.log("No such document!");
          }
      }).catch(function(error) {
          console.log("Error getting document:", error);
         });
  }
}

renderHistoryList() {
let check = this.state.checkInHistory;
let data = _.keys(check);


  if(check !== ''){
      return (
           <FlatList
             data={data}
             renderItem={item => <Text key={item.toString()}>{item}</Text>}
           />
      )



} else {
    return (
      <Text> Nothing to display </Text>
    );
  }
}
  render()
  {
    let check = this.state.checkInHistory
    return (
      <Container >
          <ScrollView>
            {this.renderHistoryList()}
          </ScrollView>

          <IconFooter />
      </Container>
    );
  }
}
const styles = StyleSheet.create({
  containerStyle: {
    height: 40,
    flex: 1,
    alignItems: 'center'
  },
  hometab:{
    alignSelf: 'center',
  }
});

const mapStateToProps = state => {
  return {
    shopId: state.push.shopId
  }
}

export default connect (mapStateToProps, actions) (checkInHistoryScreen);

我添加了整个代码片段，我得到的数据来自userShopPick。然后我使用lodash将其转换为数组。

请指导我，我现在真的哭了。

Answer 1

我设法通过使用如关于使用FlatList的doucumentation中所述的renderItem道具来解决它。

这里是链接：https://facebook.github.io/react-native/docs/flatlist.html#data

希望能帮助那些也会遇到这个问题的人。

 <FlatList
                 data={data}
                 renderItem={({item, separators}) => (
                       <Text>{item}</Text>
                  )}
    />

无法在React Native

1 个答案: