使用 Flatlist 时，元素类型无效

Question

请看下面class。一旦我使用 FlatList（或 List），我就会收到错误消息：“元素类型无效：需要一个字符串（对于内置组件）或一个 class/function 对于复合组件）但得到：未定义。你可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查 'Userlist'"

的渲染方法

当我搜索这个错误时，它通常与丢失错误的导入有关。我想，我的进口是正确的？

import React, { Component } from 'react';
import { ScrollView, View, Text, Navigator, Alert, StyleSheet} from 'react-native';
import { List, FlatList, ListItem } from 'react-native-elements';
import FBUsers from '../../firebase/FBUser'

export default class Userlist extends React.Component {
    fbUser = new FBUsers();

    constructor(props) {
       super(props);

       this.state = {
         lastRefresh: '',
       }
    }



    refresh() {
        this.setState({lastRefresh: Date(Date.now()).toString()});
    }

    // buildUserList() {
    //     var users = this.fbUser.getUserList();
    //     return users;
    // }


    renderRow ({ item }) {
    return (
      <ListItem
        roundAvatar
        title={item.name}
        subtitle={item.subtitle}
        avatar={{uri:item.avatar_url}}
      />
    )
  }

  render () {
    var list = [
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        subtitle: 'Vice President'
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        subtitle: 'Vice Chairman'
      }
    ]

    return (
      <List>
        <FlatList
          data={this.list}
          renderItem={this.renderRow}
          keyExtractor={item => item.name}
        />
      </List>
    )
  }
}

Answer 1

从 react-native 导入 FlatList。这就是您收到此错误的原因。使用此代码。

import React, { Component } from 'react';
import { ScrollView, View, Text, Navigator, Alert, StyleSheet, FlatList } from 'react-native';
import { ListItem } from 'react-native-elements';

export default class Userlist extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      lastRefresh: '',
    }
  }

  refresh() {
    this.setState({ lastRefresh: Date(Date.now()).toString() });
  }

  // buildUserList() {
  //     var users = this.fbUser.getUserList();
  //     return users;
  // }


  renderRow({ item }) {
    return (
      <ListItem
        roundAvatar
        title={item.name}
        subtitle={item.subtitle}
        leftAvatar={{ 
          source: { 
            uri: item.avatar_url 
          } 
        }}
      />
    )
  }

  render() {
    var list = [
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        subtitle: 'Vice President'
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        subtitle: 'Vice Chairman'
      }
    ]

    return (

      <FlatList
        data={list}
        renderItem={this.renderRow}
        keyExtractor={item => item.name}
      />
    )
  }
}

使用 Flatlist 时，元素类型无效

Element type invalid, when using Flatlist

javascript

react-native

react-native-flatlist