У меня есть приложение в разработке, которое позволяет пользователям отправлять данные, которые будут храниться в базе данных 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>
);
}
}
Вот фрагмент базы данных: Изображение базы данных И вот дизайн: Изображение дизайна
Я был бы очень признателен, если бы кто-нибудь мог помочь мне выяснить, что мне нужно сделать, чтобы получить записи в базе данных, которые на странице закладок отображается закладка / кнопка избранного.
Спасибо