在React Native中仅显示来自Firestore的登录用户的帖子,可以按照以下步骤进行:
npm install firebase
firebaseConfig.js
的文件,并将以下代码添加到文件中:import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_AUTH_DOMAIN',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
appId: 'YOUR_APP_ID',
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
export default firebase;
请确保将YOUR_API_KEY
等字段替换为您在Firebase控制台中获得的实际值。
PostsScreen.js
的屏幕组件,并在该组件中编写以下代码:import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import firebase from './firebaseConfig';
const PostsScreen = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const currentUser = firebase.auth().currentUser;
if (currentUser) {
const postsRef = firebase.firestore().collection('posts');
const snapshot = await postsRef.where('userId', '==', currentUser.uid).get();
const fetchedPosts = snapshot.docs.map(doc => doc.data());
setPosts(fetchedPosts);
}
};
fetchPosts();
}, []);
return (
<View>
{posts.map(post => (
<Text key={post.id}>{post.title}</Text>
))}
</View>
);
};
export default PostsScreen;
PostsScreen
组件,例如在主导航中将其作为一个屏幕。上述代码中,我们首先导入了Firebase SDK和React Native的相关组件。然后,在PostsScreen
组件中,我们使用useState
钩子来管理帖子的状态。在useEffect
钩子中,我们获取当前登录用户的UID,并使用该UID查询Firestore数据库中的帖子集合,然后将查询结果存储在状态中。最后,我们在屏幕上渲染帖子的标题。
请注意,上述代码仅提供了一个基本的示例,实际应用中可能需要进行更多的错误处理和优化。
推荐的腾讯云相关产品:腾讯云云开发(Tencent Cloud CloudBase),它是一款无服务器云开发平台,提供了云函数、云数据库、云存储等功能,可用于快速开发移动应用和小程序。您可以在腾讯云官网了解更多信息:腾讯云云开发。
领取专属 10元无门槛券
手把手带您无忧上云