Firebase 如何在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>
  );
}

import React，{useffect，useState}来自“React”；
进口{
平面列表，
键盘
文本，
文本输入，
可触摸不透明度，
看法
}从“反应本族语”；
从“/styles”导入样式；
从“../../firebase/config”导入{firebase}”；
导出默认函数CoinCreate（道具）{
const[coinText，setCoinText]=useState（“”）；
const[coins，setCoins]=useState（[]）；
const coinRef=firebase.firestore（）集合（“硬币”）；
const userID=props.extraData.id；
useffect（（）=>{
科因里夫
.where（“authorID”，“userID=”）
.orderBy（“createdAt”、“desc”）
onSnapshot先生(
（querySnapshot）=>{
const newCoins=[]；
querySnapshot.forEach（（doc）=>{
const coin=doc.data（）；
coin.id=doc.id；
新硬币。推（硬币）；
});
设置硬币（新硬币）；
},
（错误）=>{
console.log（错误）；
}
);
}, []);
const onAddButtonPress=（）=>{
如果（coinText&&coinText.length>0）{
constamp timestamp=firebase.firestore.FieldValue.serverTimestamp（）；
常数数据={
文本：coinText，
authorID:userID，
createdAt：时间戳，
};
科因里夫
.add（数据）
。然后（_doc）=>{
文本（“”）；
键盘；
})
.catch（（错误）=>{
警报（错误）；
});
}
};
常量renderCoin=（{item，index}）=>{
返回(
{index}.{item.text}
);
};
返回(
setCoinText（文本）}
值={coinText}
underlineColorAndroid=“透明”
autoCapitalize=“无”
/>
添加
{硬币&&(
项目id}
RemoveClippedSubview={true}
/>
)}
);
}

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

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

import React from "react";
import { View, Text, 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",
  },
});

从“React”导入React；
从“react native”导入{View，Text，StyleSheet}；
从“react native elements”导入{ListItem，Icon}；
导出默认函数TestingList（{list}）{
/*常数列表=[
{
姓名：“艾米·法哈”，
阿凡达网址：
"https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
副标题:"副总统"，
图标：“av定时器”，
},
{
姓名：“克里斯·杰克逊”，
阿凡达网址：
"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
副标题:"副主席"，
图标：“飞行起飞”，
},
];*/
console.log（（list）=>list.Object）；
返回(
{list.map（（l，i）=>(
{l.Object.id}
{“av定时器”}
{i}
))}
);
}
styles=样式表.create({
字幕视图：{
flexDirection:“行”，
paddingLeft:10，
paddingTop:5，
},
评级图像：{
身高：19.21，
宽度：100，
},
评级文本：{
paddingLeft:10，
颜色：“灰色”，
},
});

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

import WelcomeScreen from "./testinglist";

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

从“/testinglist”导入Welcome屏幕；
返回(
);

虚拟图标即将出现，但不是来自firebase的数据。 如有任何更正，请建议