FlatList 在 React Native 中返回空白屏幕

Question

我一直在尝试使用

平面列表

但不是显示硬编码值，而是显示空白屏幕。

这就是我所做的远。

注意：我故意省略

从反应导入元素

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

上面的代码有什么问题？ 我该怎么做才能使代码正常工作？

Answer 1

正如 Noor 所指出的，最可能的问题是<List>组件，
虽然我不知道ListItem的实际构成，但我试图模仿它。

这是工作示例：

//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' },
});

截屏：

现场世博小吃链接

Answer 2

更改item.student到item.students

subtitle={item.student}

并从代码中删除<List>