如何在屏幕之间传递 Firestore 数据 React Native

Question

我没有使用类或函数作为本机组件，而是使用带有 props 的 const 作为参数。 在我的项目中，我使用 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 } 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

Answer 1

我们可以通过访问当前屏幕的 props 来访问新屏幕中的前一个屏幕的参数。

例如

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

查看 react-navigation 的官方文档，了解将参数传递到屏幕并进行访问。

https://reactnavigation.org/docs/params/