元素类型无效，使用 Flatlist 时

Question

请看下面的课程。一旦我使用 FlatList（或 List），我就会收到错误消息：“元素类型无效：期望字符串（对于内置组件）或复合组件的类/函数）但得到：未定义。你可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查“用户列表”的渲染方法”当我搜索此错误时，它通常与缺少错误的导入有关。我想，我的进口是正确的？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

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

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}

      />

    )

  }

}