React Native中Firebase实时数据库值无法同步至文本组件求助

问题出在你用了全局变量Data存储Firebase数据——React组件只有状态（state）更新时才会触发重渲染，全局变量的变化无法被React检测到，所以文本组件不会同步更新数据库的变化。

修改步骤： #

• 用React的useState替代全局变量，让数据成为组件的响应式状态
• 用useEffect监听组件挂载/卸载生命周期，管理Firebase的实时监听，避免内存泄漏
• 在Firebase的回调中调用状态更新函数，触发组件重渲染

修改后的代码： #

import React, { useState, useEffect } from 'react'; 
import { View, Text, TextInput} from 'react-native'; 
import { NavigationContainer } from '@react-navigation/native'; 
import { createNativeStackNavigator } from '@react-navigation/native-stack'; 
import { ImageBackground, StyleSheet, Pressable, Image } from 'react-native'; 
import { Slider } from '@react-native-assets/slider' 
import { Linking } from 'react-native' 
import database from '@react-native-firebase/database';

function Room({ navigation, route }) {
  // 用useState定义响应式状态
  const [data, setData] = useState("");

  useEffect(() => {
    // 定义监听函数
    const onDataChange = snapshot => {
      console.log('data from firebase: ', snapshot.val());
      // 更新状态，触发组件重渲染
      setData(snapshot.val());
    };

    // 绑定Firebase实时监听
    const dbRef = database().ref('/esp01_1/id');
    dbRef.on('value', onDataChange);

    // 组件卸载时取消监听，防止内存泄漏
    return () => {
      dbRef.off('value', onDataChange);
    };
  }, []); // 空依赖数组表示只在组件挂载/卸载时执行

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{data}</Text>
    </View>
  ); 
}

关键说明： #

• useState创建的data是组件的响应式状态，调用setData时React会自动重新渲染组件，更新文本内容
• useEffect的返回函数会在组件卸载时执行，取消Firebase的监听，避免组件销毁后仍接收数据导致的内存泄漏
• 移除了全局变量Data，改用组件内部状态来维护数据，确保数据变化能被React感知

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