Javascript 如何在屏幕之间传递firestore数据

我没有使用类或函数作为本机组件，而是使用const和props作为参数。 在我的项目中，我使用Firestore作为数据库，我想将数据从一个屏幕传递到另一个屏幕，但我不知道如何传递，有人能给我一些提示吗？ 我的另一个问题是在firestore查询中，因为我需要放置.doc（firebase.auth（）.currentUser），并且当我测试我的应用程序时，应用程序中会发生错误

BreadAndBounty.js

import React, { useState, useEffect } from "react";
import { View, Text, TextInput, StyleSheet, Image, ScrollView, TouchableOpacity, StatusBar, SafeAreaView, FlatList, Dimensions, ImageBackground } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import Constants from 'expo-constants'
import firebase, { firestore } from 'firebase'
require('firebase/firestore')

const { width, height } = Dimensions.get("window");

const BreadAndBounty = (props) => {

    const [adverts, setAdverts] = useState([])

    const getAdverts = async () => {

        const querySnap =  await firestore()
        .collection('adverts')
        .get()
        const result = querySnap.docs.map(docSnap => docSnap.data())
        setAdverts(result)
    }
   

    useEffect(() => {
        getAdverts()
    }, [])


    const renderItem = (item) => {
        return (
            <View>
                <View style={{
                    flexDirection: "row",
                    paddingTop: 50,
                    alignItems: "center"
                }}>
                    <View style={{ width: "20%" }}>

                    </View>
                    <View style={{
                        width: "60%"
                    }}>
                        <Text style={{
                            fontWeight: "bold",
                            fontSize: 14,
                            color: "#044244"
                        }}>{item.title}</Text>

                        <Text style={{
                            fontWeight: "900",
                            fontSize: 12,
                            color: "#9ca1a2"
                        }}>
                            {item.name}
                        </Text>
                    </View>
                    <View style={{
                        width: "20%",
                        alignItems: "flex-end"
                    }}>

                    </View>
                </View>

                <TouchableOpacity
                    onPress={() => props.navigation.navigate(("AdvertsDetail"), { uid: firebase.auth().currentUser  })}
                    style={{
                        flexDirection: "row",
                        width: "100%",
                        paddingTop: 20
                    }}>
                    <ImageBackground
                        source={item.image}
                        style={{
                            width: 300,
                            height: 220,
                            borderRadius: 30,
                        }}
                        imageStyle={{
                            borderRadius: 30,
                        }}
                    >
                        <View style={{
                            height: "100%",
                            flexDirection: "row",
                            alignItems: 'flex-end',
                            justifyContent: "flex-end"
                        }}>
                        </View>
                    </ImageBackground>
                </TouchableOpacity>
            </View>
        )
    }

    return (
        <ScrollView showsVerticalScrollIndicator={false}
            style={{
                height: "100%",
                backgroundColor: "#62929E"
            }}>
            <View style={styles.view1}>
                <View style={styles.view2}>
                    <View>

                    </View>
                    <View style={styles.view3}>

                    </View>
                </View>
                <Text style={styles.text1}>Bread And Bounty</Text>
                <View style={styles.view_search}>
                    <TextInput
                        placeholder="Pesquisar anúncios de voluntariado..."
                        style={styles.textinput}>

                    </TextInput>
                    <Ionicons
                        name="search"
                        size={15}
                        color="#9CALA2"
                    ></Ionicons>
                </View>
            </View>

            <View style={styles.view4}>
                <View style={{ width: "100%" }}>
                    <FlatList
                        numColumns={1}
                        horizontal={false}
                        showsVerticalScrollIndicator={false}
                        style={{
                            display: "flex",
                            height: Dimensions.get("screen").height,
                            width: Dimensions.get("screen").width
                        }}
                        data={adverts}
                        renderItem={({ item }) => renderItem(item)} />
                </View>
            </View>
        </ScrollView>
    )
}

export default BreadAndBounty

import React，{useState，useffect}来自“React”；
从“react native”导入{视图、文本、文本输入、样式表、图像、滚动视图、TouchableOpacity、状态栏、安全区域视图、平面列表、维度、图像背景}
从“@expo/vector icons”导入{Ionicons}
从“expo常量”导入常量
从“firebase”导入firebase，{firestore}
需要（'firebase/firestore'）
const{width，height}=Dimensions.get（“窗口”）；
常量面包和赏金=（道具）=>{
const[adverts，setAdverts]=useState（[]）
const getAdverts=async（）=>{
const querySnap=wait firestore（）
.收藏（‘广告’）
.get（）
const result=querySnap.docs.map（docSnap=>docSnap.data（））
设置广告（结果）
}
useffect（（）=>{
getAdverts（）
}, [])
const renderItem=（项）=>{
返回(
{item.title}
{item.name}
props.navigation.navigate（（“广告尾”），{uid:firebase.auth（）.currentUser}
风格={{
flexDirection:“行”，
宽度：“100%”，
加油站：20
}}>
)
}
返回(
面包和赏金
renderItem（项目）}/>
)
}
导出默认面包赏金

广告详情

import React, { useState } from 'react'
import { View, StyleSheet, Text,TouchableOpacity } from 'react-native'
import Constants from 'expo-constants';
import { Ionicons } from "@expo/vector-icons"

const AdvertsDetail = (props) => {

    const [currentUser, Adverts] = useState([])

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <TouchableOpacity onPress={() => props.navigation.goBack()}>
                    <Ionicons name="md-arrow-back" size={24} color="#52575D"></Ionicons>
                </TouchableOpacity>
            </View>
            <Text>{currentUser.title}</Text>
        </View>
    )
}
export default AdvertsDetail

import React，{useState}来自“React”
从“react native”导入{视图、样式表、文本、TouchableOpacity}
从“expo常量”导入常量；
从“@expo/vector icons”导入{Ionicons}
const AdvertsDetail=（道具）=>{
const[currentUser，Adverts]=useState（[]）
返回(
props.navigation.goBack（）}>
{currentUser.title}
)
}
导出默认广告详细信息

我们可以通过访问当前屏幕的道具，从新屏幕的上一屏幕访问参数

前

import React，{useState}来自“React”
从“react native”导入{视图、样式表、文本、TouchableOpacity}
从“expo常量”导入常量；
从“@expo/vector icons”导入{Ionicons}
const AdvertsDetail=（道具）=>{
const currentUser=props.route.params.uid
返回(
props.navigation.goBack（）}>
{currentUser.title}
)
}
导出默认广告详细信息

查看react navigation中的官方文档，将参数传递到屏幕并访问它

import React, { useState } from 'react'
import { View, StyleSheet, Text,TouchableOpacity } from 'react-native'
import Constants from 'expo-constants';
import { Ionicons } from "@expo/vector-icons"

const AdvertsDetail = (props) => {

    const currentUser = props.route.params.uid

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <TouchableOpacity onPress={() => props.navigation.goBack()}>
                    <Ionicons name="md-arrow-back" size={24} color="#52575D"></Ionicons>
                </TouchableOpacity>
            </View>
            <Text>{currentUser.title}</Text>
        </View>
    )
}
export default AdvertsDetail