在react原生中使用firebase显示来自留言板的消息

npm install firebase

import firebase from 'firebase/app';
import 'firebase/database';

// 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
firebase.initializeApp(firebaseConfig);

// 获取数据库引用
const database = firebase.database();

import React, { useEffect, useState } from 'react';

const MessageBoard = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // 从Firebase数据库中获取消息
    const messagesRef = database.ref('messages');
    messagesRef.on('value', (snapshot) => {
      const messagesData = snapshot.val();
      if (messagesData) {
        const messagesList = Object.values(messagesData);
        setMessages(messagesList);
      }
    });

    // 清除监听器
    return () => {
      messagesRef.off();
    };
  }, []);

  return (
    <div>
      <h2>留言板消息</h2>
      {messages.map((message) => (
        <div key={message.id}>
          <p>{message.text}</p>
          <p>作者：{message.author}</p>
        </div>
      ))}
    </div>
  );
};

export default MessageBoard;

{
  "messages": {
    "message1": {
      "id": "1",
      "text": "Hello, world!",
      "author": "John Doe"
    },
    "message2": {
      "id": "2",
      "text": "Nice to meet you!",
      "author": "Jane Smith"
    },
    ...
  }
}