如何在react-native functional components中呈现从firebase数据库中获取数据

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

// 导入其他必要的组件和样式

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

// 初始化Firebase应用
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 获取Firebase数据库的引用
    const dbRef = firebase.database().ref('/your-collection');

    // 监听数据变化
    dbRef.on('value', snapshot => {
      const firebaseData = snapshot.val();
      if (firebaseData) {
        // 将数据存储在状态变量中
        setData(firebaseData);
      }
    });

    // 在组件卸载时取消监听
    return () => dbRef.off();
  }, []);

  return (
    <View>
      {data.map(item => (
        <Text key={item.id}>{item.name}</Text>
      ))}
    </View>
  );
};

export default MyComponent;