Question

我已经找到了很多有关此错误的答案，但没有一个可以为我解决此问题。

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  FlatList
} from "react-native";
import firebase from "firebase";
import RightComponent from "/home/shagun/UIET-students-app/src/pages/rightComponent";
import { Header } from "react-native-elements";
import { List, ListItem } from "react-native-elements";
export default class Main extends React.Component {
  state = {
    currentUser: null,
    name: "...",
    email: "",
    loading: false,
    data: [
      {
        title: "type ur idea",
        email: "xxx@gmail.com",
        detail: "share ur idea",
        contact: "provide contact details"
      }
    ]
  };

  componentDidMount() {
    const { currentUser } = firebase.auth();
    this.setState({ currentUser });
    firebase
      .firestore()
      .collection("users")
      .where("email", "==", currentUser && currentUser.email)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          const name = doc.data().name;
          const email = doc.data().email;
          console.log(name);
          this.setState({ name });
          this.setState({ email });
        });
      });

    this.makeRemoteRequest();
  }

  addPosts = posts => {
    this.setState(previousState => {
      let data = {
        ...previousState.data,
        ...posts
      };
      return {
        data,
        posts: Object.values(data).sort((a, b) => a.timestamp < b.timestamp)
      };
    });
  };

  makeRemoteRequest = () => {
    const { data } = this.state;
    this.setState({ loading: true });
    let ref = firebase
      .firestore()
      .collection("cards")
      .orderBy("timestamp", "desc");

    ref.get().then(querySnapshot => {
      querySnapshot.forEach(doc => {
        if (doc.exists) {
          const post = doc.data();

          data.push(post);
        } else {
          console.log("no data found");
        }
      });
    });
  };

  overlay = () => {
    this.props.navigation.push("form", { email: this.state.email });
  };
  renderRow({ item }) {
    return <ListItem title={item.email} />;
  }

  render() {
    return (
      <View style={styles.container}>
        <Header
          placement="center"
          centerComponent={{
            text: "WELCOME" + "  " + this.state.name.toUpperCase(),

            style: { color: "#fff", fontSize: 17, fontWeight: "bold" }
          }}
          rightComponent={<RightComponent />}
          containerStyle={{
            backgroundColor: "rgba(13,71,161,0.9)",
            justifyContent: "center"
          }}
        />
        <List>
          <FlatList
            data={this.state.data}
            renderItem={this.renderRow}
            keyExtractor={item => item.email}
          />
        </List>
        <TouchableOpacity style={styles.button} onPress={this.overlay}>
          <Text style={styles.buttonText}>AddPost</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

每当我从从react-native-elements导入的代码中删除List和ListItem时，它都可以正常工作。我感觉我导入的列表组件存在一些问题。

我希望我能解释我的问题

Answer 1

我猜<List>造成了问题，因为通过查看react-native-elements文档，我找不到与<List>相关的任何组件

从渲染以及导入中删除<List>，然后再次检查。

即使在他们的示例中，它是<FlatList>并且在内部使用了<ListItem>，所以我认为<List>在该库中不可用，甚至我也找不到它在源代码中。

Answer 2

他们从最近的版本中删除了List。

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到：未定义

2 个答案: