使用 react native 从 firebase 实时数据库中读取数据

Question

我想从 firebase 实时数据库中读取数据。

我想修复我的“ function readData() ”之类的，

如果我使用这个功能，我想读取我的数据，而不输入“用户名”。

例如，我创建了这个，

用户名：你好，email：hello@gmail.com

如果我按下“读取数据”按钮，（不输入“用户名”）我想读取最近的数据。 （用户名和 email 都有）

请帮我！

这是我的 app.js

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { Button, button, StyleSheet, Text, TextInput, View } from 'react-native';
import { ref, set, update, onValue, remove } from "firebase/database";
import { db } from './components/config';


export default function App() {

  const [username, setName] = useState('');
  const [email, setEmail] = useState('');



  function createData() {

    set(ref(db, 'users/' + username), {          
      username: username,
      email: email  
    }).then(() => {
      // Data saved successfully!
      alert('data created!');    
  })  
      .catch((error) => {
          // The write failed...
          alert(error);
      });
}


  function update() {

    set(ref(db, 'users/' + username), {
      username: username,
      email: email  
    }).then(() => {
      // Data saved successfully!
      alert('data updated!');    
  })  
      .catch((error) => {
          // The write failed...
          alert(error);
      });
}

  
  function readData() {

    const starCountRef = ref(db, 'users/' + username);
    onValue(starCountRef, (snapshot) => {
      const data = snapshot.val();

      setEmail(data.email);   

    });

  }



  return (
    <View style={styles.container}>
      <Text>firebase</Text>
      <TextInput value={username} onChangeText={(username) => {setName(username)}} placeholder='Username' style={styles.TextBoxes}></TextInput>
      <TextInput value={email} onChangeText={(email) => {setEmail(email)}} placeholder='Email' style={styles.TextBoxes}></TextInput>
      <Button title='create data' onPress={createData}></Button>
      <Button title='update data' onPress={update}></Button>
      <Button title='read data' onPress={readData}></Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  TextBoxes: {
    width:'90%',
    fontSize:18,
    padding:12,
    backgroundColor:'grey',
    marginVertical:10,
  }
});

Answer 1

我知道如果用户名为空，您想默认调用最后一个用户名。 为此，您可以定义 lastUserName state 并在用户名为空时调用它，例如；

 const [lastUserName, setLastUserName] = useState('');

读取数据（），

 function readData() { const starCountRef = ref(db, 'users/' + username?== '': username; lastUserName), onValue(starCountRef. (snapshot) => { const data = snapshot;val(). setEmail(data;email); }); }

那么，视图应该是这样的；

 <View style={styles.container}> <Text>firebase</Text> <TextInput value={username} onChangeText={(username) => { setName(username) setLastUserName(username) // add this line } } placeholder='Username' style={styles.TextBoxes}></TextInput> <TextInput value={email} onChangeText={(email) => {setEmail(email)}} placeholder='Email' style={styles.TextBoxes}></TextInput> <Button title='create data' onPress={createData}></Button> <Button title='update data' onPress={update}></Button> <Button title='read data' onPress={readData}></Button> </View>

注意：如果您想将此 state 保留在全球范围内，请使用 Redux。

注意：如果您希望应用程序在关闭和重新打开后在同一个 state 上运行，请使用 localStorage。 见： https://github.com/react-native-async-storage/async-storage