如何在React Native中从Firebase Database获取数据并赋值给变量

嘿，我来帮你搞定这个需求！在React Native里从Firebase Realtime Database提取数据并赋值给变量其实很简单，我给你一步步梳理清楚：

前提准备 #

首先确保你已经完成了Firebase的基础配置：

• 安装了必要依赖：npm install @react-native-firebase/app @react-native-firebase/database
• 按照Firebase官方文档完成了React Native项目的安卓/iOS配置

核心实现代码 #

我们可以用React的useState来声明要存储的变量，结合useEffect来发起数据请求。这里根据你提供的数据库结构截图，直接替换成你实际的路径和字段名即可：

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import database from '@react-native-firebase/database';

const FirebaseDataComponent = () => {
  // 声明两个状态变量，用于存储从Firebase获取的值
  const [targetValue1, setTargetValue1] = useState('');
  const [targetValue2, setTargetValue2] = useState('');

  useEffect(() => {
    // 替换为你数据库中目标节点的实际路径
    const dataRef = database().ref('/your-specific-node-path');

    // 方式1：一次性获取数据（适合只需要加载一次的场景）
    dataRef.once('value')
      .then(snapshot => {
        if (snapshot.exists()) {
          const fetchedData = snapshot.val();
          // 替换为你数据库中的两个字段名
          setTargetValue1(fetchedData.fieldName1);
          setTargetValue2(fetchedData.fieldName2);
        } else {
          console.log('目标节点下没有数据哦');
        }
      })
      .catch(error => {
        console.error('获取数据时出错：', error);
      });

    // 方式2：实时监听数据变化（如果需要数据更新时自动同步）
    // const unsubscribe = dataRef.on('value', snapshot => {
    //   if (snapshot.exists()) {
    //     const fetchedData = snapshot.val();
    //     setTargetValue1(fetchedData.fieldName1);
    //     setTargetValue2(fetchedData.fieldName2);
    //   }
    // });

    // 如果用实时监听，记得在组件卸载时取消监听，避免内存泄漏
    // return () => unsubscribe();
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text>第一个值：{targetValue1}</Text>
      <Text>第二个值：{targetValue2}</Text>
    </View>
  );
};

export default FirebaseDataComponent;

关键解释 #

• 状态管理：用useState创建的targetValue1和targetValue2就是你要赋值的变量，数据获取后通过setTargetValueX更新它们。
• 数据获取：
  • once('value')：一次性拉取数据，适合不需要实时同步的场景。
  • on('value')：实时监听节点数据变化，数据更新时会自动触发回调，记得在组件卸载时取消监听。
• 数据解析：通过snapshot.val()拿到节点的完整数据对象，然后直接提取需要的字段赋值即可。

根据你提供的数据库截图，只需要把代码中的/your-specific-node-path换成截图里的实际节点路径，fieldName1和fieldName2换成截图里的两个字段名称，就能完美适配你的需求啦。

内容的提问来源于stack exchange，提问作者Krishan DKM