React Native 在一个 Flatlist 中组合 2 个 Firestore collection

Question

我在 Firestore 中有 2 个 collection 可以像这样执行 FeedScreen

collection 用户（当用户注册 App 时）

users = [
    avatar: '',
    email: '',
    name: ''
]

collection Post（当用户创建 post）

posts = [
   image: '',
   text: '',
   timestamp: '',
   uid: ''
]

我 useState 和 collection post 像这样

const [loading, setLoading] = useState(true);
const [post, setPost] = useState([]); // Initial empty array of users

useEffect(() => {
  const subscriber = firebase
    .firestore()
    .collection("posts")
    .orderBy("timestamp", "desc")
    .onSnapshot((querySnapshot) => {
      const post = [];

      querySnapshot.forEach((doc) => {
        post.push({
          key: doc.id,
          name: doc.data().name, //want name from collection users
          text: doc.data().text,
          timestamp: doc.data().timestamp,
          avatar: { uri: doc.data().avatar }, //want avatar from collection users
          image: { uri: doc.data().image },
        });
      });

      setPost(post);
      setLoading(false);
    });

  // Unsubscribe from events when no longer in use
  return () => subscriber();
}, []);

if (loading) {
  return <ActivityIndicator />;
}

还有 Flatlist

<FlatList
  style={styles.feed}
  data={post}
  renderItem={({ item }) => this.renderPost(item)}
  keyExtractor={(item) => item.key}
  showsVerticalScrollIndicator={false}
/>;

我尝试 useState collection('users') 并将其与地图结合使用，但出现错误

我想将 feed 显示到包含 post 中所有数据的 flatlist，并从用户 collection 获取头像和名称。

Answer 1

您应该从 2 个集合列表创建一个 new array，.data 是您在下面的示例中所需要的。

const users = [
  {
    id: “”,
    avatar: “ “ ,
    email : “ “ ,
    name: ""
  },
];

const post = [
  {
    image: "", 
    text: "", 
    timestamp: ,, 
    uid: ""
  }
];


const collectionUsers = {}:
users.forEach((item) => {
  if(collectionUsers[item.id] {
     collectionUsers[item.id] += item.avatar;
  } else {
    collectionUsers[item.id] = item.avatar;
  }
});


const data = post.map((item) => ({
   … item,
   avatar: collectionUsers[item.id]
})):

console.log(data);


<FlatList 
       data={post}
       keyExtractor={(item, index) => String(index)} 
       renderItem={({ item }) => ( 
               <View> 
                     <Text> 
                            {item.avatar} 
                    </Text> 
              </View> 
      )} 
  />

可以帮助您的其他文档：

https://www.tutorialguruji.com/javascript/combine-multiple-firestore-collection-in-one-flatlist-in-react-native/

https://rnfirebase.io/firestore/usage-with-flatlists

https://medium.com/@harshita.arun.1/firebase-to-flatlist-react-native-5281718969ab

React Native 在一个 Flatlist 中组合 2 个 Firestore collection

React Native combine 2 Firestore collection in one Flatlist

firebase

react-native

google-cloud-firestore

expo

react-native-flatlist