Блог

Я работаю над простым приложением React Native для чтения и записи данных из базы данных Firebase. Моим разрешениям на чтение и запись в Firebase присвоено значение true:

 {
  "rules": {
    ".read": true,  
    ".write": true,  
  }
}
 

Вот мои соответствующие файлы:

App.js

 import React from 'react'
import {View, StyleSheet, Button} from 'react-native'
import * as firebase from 'firebase'
import RootStackNavigator from './navigation/RootNavigation'

export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      isLoadingComplete: false
    }
    var firebaseConfig = {
      apiKey: "xxxxxxx",
      authDomain: "testproject-9d0bc.firebaseapp.com",
      databaseURL: "https://testproject-9d0bc-default-rtdb.firebaseio.com",
      projectId: "testproject-9d0bc",
      storageBucket: "testproject-9d0bc.appspot.com",
      messagingSenderId: "1003049293166",
      appId: "1:1003049293166:web:1df37fd6d181cf895cdd7f"
    };

    if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
    } else {
      firebase.app()
    }
   }

  render() {
    return (
    <View style={styles.container}>
      <RootStackNavigator/>
    </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});
 

RootStackNavigation.js

 import React from 'react';
import { createAppContainer, StackNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../src/screens/HomeScreen';

const RootStackNavigator =  createStackNavigator(
  {
      screen: HomeScreen
  },
  {
    initialRouteName:"screen", // first component that should be displayed
    defaultNavigationOptions: {
      title: "App" 
    }
  }
);

export default createAppContainer(RootStackNavigator)
 

HomeScreen.js

 import React from "react";
import { Text, StyleSheet, View, Button, TouchableOpacity } from "react-native";
import * as firebase from "firebase";
const HomeScreen = (
  props
) => {
  function getData() {
    firebase
      .database()
      .ref("people/")
      .on("value", (snapshot) => {
        const age = snapshot.val().age;
        console.log("Age: "   age);
      });
  }

  return (
    <View>
      <Text>Hello this is the home screen</Text>
      <Button title="Get Data" onPress={getData} />
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
  },
});

export default HomeScreen;
 

Моя база данных firebase выглядит следующим образом (все данные были добавлены вручную через веб-сайт firebase), и я хочу иметь возможность распечатать эти элементы после нажатия кнопки «Получить данные» на консоли, как показано в моей getData функции в HomeScreen.js

Однако мой код getData не работает, и ничего не выводится на мою консоль. Что я здесь упускаю из виду?

Пожалуйста, измените это в своем коде

 firebase.database.ref("people").on("value", snapshots => {
    let peoples = [];
    snapshots.forEach((snapshot) => {
   peoples.push(snapshot.val().age);
    console.log(snapshot.val().age);
    });
   // here you can set this Array
  // setPeople(peoples) 
 

Разобрался в моей проблеме. Как вы можете видеть в моей базе данных firebase, способ доступа к моим данным был неправильным. Если бы я хотел узнать возраст «папы», я должен был позвонить snapshot.val().dad .