FlatList 在 React Native 中返回空白屏幕

Question

I have been trying to render data for view using

FlatList

but instead of displaying the hard-coded values, it is displaying blank screen.

This is what I have done do far.

NB: I intentionally omit

import elements from react

import { List, ListItem } from "react-native-elements";

const attendants = [{
       courseName: 'comp',
       lecturer: 'Akanbi T.B',
       students: 'Tunde Ajagba',
      date: '10/11/2020',
      no: 1,
     },{
       courseName: 'comp',
       lecturer: 'Akanbi T.B',
       students: 'Tunde Ajagba',
      date: '09/11/2020',
      no: 2,
     },
     {
       courseName: 'comp',
       lecturer: 'Akanbi T.B',
       students: 'Tunde Ajagba',
      date: '08/11/2020',
      no:3,
     },
     ];

export default class ViewAttendance extends Component {
  constructor(props) {
        super(props);

        this.state = {
            data: [],
        }
    }
    
    componentDidMount() {
      this.setState({
          data: [...this.state.data, ...attendants],
        });
    }

  render() {
    return (
      <Container style={styles.containerStyle}>
        <List>
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          <ListItem
            title={`${item.lecturer} ${item.courseName}`}
            subtitle={item.student}
            keyExtractor={item => item.no}
          />
        )}
      />
    </List>
</Container>
    );
  }
}

What is wrong with the above codes? What can I do to make the code work?

Answer 1

As pointed out by Noor, the most likely problem is with <List> component,
Though I don't know the actual makeup of ListItem , I tried to emulate it.

Here is the working example:

//import { List, ListItem } from 'react-native-elements';
import React, { Component } from 'react';
import {
  Text,
  View,
  FlatList,
  StyleSheet,
} from 'react-native';

const attendants = [
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '10/11/2020',
    no: 1,
  },
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '09/11/2020',
    no: 2,
  },
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '08/11/2020',
    no: 3,
  },
];

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this.setState({
      data: [...this.state.data, ...attendants],
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              title={`${item.lecturer} ${item.courseName}`}
              subtitle={item.students}
              keyExtractor={(item) => item.no}
            />
          )}
        />
      </View>
    );
  }
}

const ListItem = ({title, subtitle}) => {
  return (
    <>
      <View style={styles.listContainer}>
        <Text style={styles.title}>
          {title}
        </Text>
        <Text style={styles.subtitle}>{subtitle}</Text>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
  },
  listContainer: {
    height: 40,
    backgroundColor: 'teal',
    margin: 5,
    paddingHorizontal: 5,
    borderRadius: 4,
  },
  subtitle: { fontSize: 12, color: 'rgba(0,0,10,0.5)' },
  title: { fontSize: 14, color: 'white', fontWeight: 'bold' },
});

Screenshot:

Live Expo Snack Link

Answer 2

Change item.student to item.students

subtitle={item.student}

and remove <List> from code