(React-Native) Как изменить код, отображающий базу данных Firebase Realtime для работы с Flat List? - PullRequest
Новая
       26

(React-Native) Как изменить код, отображающий базу данных Firebase Realtime для работы с Flat List?

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

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

Вот как выглядит моя база данных: Скриншот базы данных

Вот код, используемый в HomeScreen. js: 

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>
    );
  }
}

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

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>
    );
  }
}

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

Я очень признателен за помощь. Спасибо

...