如何在 React Native 中将 flatlist 转换为 listitem？

问题描述

我有一个平面列表，其中的数据来自 firebase。

数据格式：

Object {
  "authorID": "nMOpBupcptZF8YlxiJYFX7vPMtC2","createdAt": Object {
    "nanoseconds": 674000000,"seconds": 1622700888,},"id": "NWywuglYPagdeleff793","text": "btt",}

使用 FlatList，我可以列出元素，这些元素是我从示例示例中获得的代码。

您可以在下面看到 renderCoin 方法。

import React,{ useEffect,useState } from "react";
import {
  FlatList,Keyboard,Text,TextInput,TouchableOpacity,View,} from "react-native";
import styles from "./styles";
import { firebase } from "../../firebase/config";

export default function CoinCreate(props) {
  const [coinText,setCoinText] = useState("");
  const [coins,setCoins] = useState([]);

  const coinRef = firebase.firestore().collection("coins");
  const userID = props.exTradata.id;

  useEffect(() => {
    coinRef
      .where("authorID","==",userID)
      .orderBy("createdAt","desc")
      .onSnapshot(
        (querySnapshot) => {
          const newCoins = [];
          querySnapshot.forEach((doc) => {
            const coin = doc.data();
            coin.id = doc.id;
            newCoins.push(coin);
          });
          setCoins(newCoins);
        },(error) => {
          console.log(error);
        }
      );
  },[]);

  const onAddButtonPress = () => {
    if (coinText && coinText.length > 0) {
      const timestamp = firebase.firestore.FieldValue.serverTimestamp();
      const data = {
        text: coinText,authorID: userID,createdAt: timestamp,};
      coinRef
        .add(data)
        .then((_doc) => {
          setCoinText("");
          Keyboard.dismiss();
        })
        .catch((error) => {
          alert(error);
        });
    }
  };
  const renderCoin = ({ item,index }) => {
    return (
      <View style={styles.entityContainer}>
        <Text style={styles.entityText}>
          {index}. {item.text}
        </Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.formContainer}>
        <TextInput
          style={styles.input}
          placeholder="Add new coin"
          placeholderTextColor="#aaaaaa"
          onChangeText={(text) => setCoinText(text)}
          value={coinText}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TouchableOpacity style={styles.button} onPress={onAddButtonPress}>
          <Text style={styles.buttonText}>Add</Text>
        </TouchableOpacity>
      </View>
      {coins && (
        <View style={styles.listContainer}>
          <FlatList
            data={coins}
            renderItem={renderCoin}
            keyExtractor={(item) => item.id}
            removeClippedSubviews={true}
          />
        </View>
      )}
    </View>
  );
}

但是，当我尝试用 ListView 替换它时，我无法生成列表数据。

我尝试过的代码，用于 testinglist.jsx 的单独文件

import React from "react";
import { View,StyleSheet } from "react-native";
import { ListItem,Icon } from "react-native-elements";

export default function TestingList({ list }) {
  /* const list = [
    {
      name: "Amy Farha",avatar_url:
        "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",subtitle: "Vice President",icon: "av-timer",{
      name: "Chris Jackson",avatar_url:
        "https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",subtitle: "Vice Chairman",icon: "flight-takeoff",];*/
  console.log((list) => list.Object);

  return (
    <View>
      {list.map((l,i) => (
        <ListItem key={i} bottomDivider>
          <Icon name={"av-timer"} />
          <ListItem.Content>
            <ListItem.Title>{l.Object.id}</ListItem.Title>
            <ListItem.Subtitle>{"av-timer"}</ListItem.Subtitle>
          </ListItem.Content>
          <Text>{i}</Text>
          <Icon name={"av-timer"} />
          <Icon name={"flight-takeoff"} />
        </ListItem>
      ))}
    </View>
  );
}

styles = StyleSheet.create({
  subtitleView: {
    flexDirection: "row",paddingLeft: 10,paddingTop: 5,ratingImage: {
    height: 19.21,width: 100,ratingText: {
    paddingLeft: 10,color: "grey",});

在 coinCreate.js 中我直接引用了它。

import WelcomeScreen from "./testinglist";

return (
    <SafeAreaView style={styles.AndroidSafeArea}>
      <WelcomeScreen list={coins} />
    </SafeAreaView>
  );

虚拟图标来了，但不是来自 Firebase 的数据。 任何更正，请提出建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）