Как сделать закладку элементов из базы данных Firebase в реальном времени в React Native? - PullRequest
Новая
       74

Как сделать закладку элементов из базы данных Firebase в реальном времени в React Native?

0 голосов
/ 03 мая 2020

У меня есть приложение в разработке, которое позволяет пользователям отправлять данные, которые будут храниться в базе данных Firebase в реальном времени, а затем все представления отображаются на главном экране. Я рассчитываю внедрить систему закладок / избранных, в которой пользователи могут нажимать кнопки, а затем записи базы данных, которые им понравились / добавили в избранное, отображаются на другом экране без необходимости входа (так что локальное хранилище?).

Вот код домашнего экрана: 

import React, { Component } from 'react';
import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import PostsComponent from '../components/PostsComponent';
import { ScrollView } from 'react-native-gesture-handler';
import { db } from '../config';

let postsRef = db.ref('/Posts');

export default class Posts extends Component {
  state = {
    posts: []
  };

  componentDidMount() {
    postsRef.on('value', snapshot => {
      let data = snapshot.val();
      let posts = Object.values(data);
      this.setState({ posts });
    });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        {this.state.posts.length > 0 ? (
          <PostsComponent posts={this.state.posts} />
        ) : (
          <Text>No items</Text>
        )}
      </ScrollView>
    );
  }
}

А вот код компонентов, используемый для отображения записей базы данных на главном экране: 

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import PropTypes from 'prop-types';
import StarRating from 'react-native-star-rating';

export default class PostsComponent extends Component {
  static propTypes = {
    posts: PropTypes.array.isRequired
  };

  render() {
    return (
      <View style={styles.itemsList}>
        {this.props.posts.map((post, index) => {
          return (
            <View key={index}>
              <Text style={styles.Title}>{post.Title}</Text>
              <Text style={styles.Restaurant}>{post.Restaurant}</Text>
              <Text style={styles.Dish}>{post.Dish}</Text>
              <Image style={styles.itemimg} source={{uri: post.Image}}/>
              <StarRating fullStarColor={'#32CD32'} disabled={true} rating={post.Stars}/>
              <Text style={styles.Comment}>{post.Comment}</Text>
            </View>
          );
        }).reverse()}
      </View>
    );
  }
}

Вот фрагмент базы данных: Изображение базы данных И вот дизайн: Изображение дизайна

Я был бы очень признателен, если бы кто-нибудь мог помочь мне выяснить, что мне нужно сделать, чтобы получить записи в базе данных, которые на странице закладок отображается закладка / кнопка избранного.

Спасибо

...