Блог

Я разрабатываю приложение react native firebase для ресторана. В моем случае мне нужно изменить цвет изображения «избранное» (сердце), как только я добавлю элемент в список «избранное», а тем временем, если я удалю элемент из списка, мне придется изменить предыдущий цвет того же элемента изображения «избранное» (сердце).

Здесь все данные сохраняются в базе данных firebase в режиме реального времени.

Это скриншот любимого изображения (в форме сердца)

Скриншот списка избранных

Код значка любимого изображения

  {/*Favourites*/}
          <View
            style={{justifyContent: 'flex-end', alignItems: 'flex-end'}}>
            <TouchableOpacity
              onPress={() =>
                addToFavourites(item.menuId, item.name, item.price)
              }>
              <Image
                source={icons.like}
                resizeMode="contain"
                style={{
                  width: 40,
                  height: 40,
                  marginLeft: 230,
                  marginTop: -25,
                  marginRight: 10,
                  tintColor: COLORS.darkgray,
                }}
              />
            </TouchableOpacity>
          </View>
 

Сохраните элемент в базе данных в режиме реального времени, как только мы нажмем кнопку «Избранное».
Аддтофавориты()

 //Database
  const addToFavourites = async (id, foodname, foodPrice) => {
    //get current user
    var user = auth().currentUser.uid;

  
    //get Unique key
    var databaseRef = database().ref(user).child('favourites').push();
    var keyId = databaseRef.key;

    //update the details
    databaseRef.set({
      menuId: id,
      name: foodname,
      id: keyId,
      price: foodPrice,
    });
  }; 
 

This is the code for favorite item List screenshot 2

    class Favourites extends Component {
      _isMounted = false;
      //New Try
      constructor(props) {
        super(props);
    
        currentUser = auth().currentUser;
        this.tasksRef = database().ref(currentUser.uid).child('favourites');
    
        const dataSource = [];
        this.state = {
          dataSource: dataSource,
          selecteditem: null,
          snackbarVisible: false,
          confirmVisible: false,
        };
      }
    
      //Read Data From Db
      componentDidMount() {
        this._isMounted = true;
        // start listening for firebase updates
        this.listenForTasks(this.tasksRef);
      }
    
      listenForTasks(tasksRef) {
        tasksRef.on('value', (dataSnapshot) => {
          var tasks = [];
          dataSnapshot.forEach((child) => {
            tasks.push({
              name: child.val().name,
              price: child.val().price,
              key: child.key,
            });
          });
    
          this.setState({
            dataSource: tasks,
          });
        });
      }
    
      //Delete Item
      deleteItem(item) {
        this.setState({deleteItem: item, confirmVisible: true});
      }
      performDeleteItem(key) {
        var updates = {};
        updates['/favourites/'   key] = null;
        return database().ref(currentUser.uid).update(updates);
      }
    
      //Delete Dialog
      hideDialog(yesNo) {
        this.setState({confirmVisible: false});
        if (yesNo === true) {
          this.performDeleteItem(this.state.deleteItem.key).then(() => {
            this.setState({snackbarVisible: true});
          });
        }
      }
    
      showDialog() {
        this.setState({confirmVisible: true});
        console.log('in show dialog');
      }
    
      undoDeleteItem() {
        this.addItem(this.state.deleteItem.name, this.state.deleteItem.price);
      }
    
      //Add Item for Undo
      addItem(itemName, itemPrice) {
        var newPostKey = database().ref(currentUser.uid).child('favourites').push()
          .key;
    
        var updates = {};
        updates['/favourites/'   newPostKey] = {
          name:
            itemName === '' || itemName == undefined
              ? this.state.itemname
              : itemName,
          price:
            itemPrice === '' || itemPrice == undefined
              ? this.state.itemprice
              : itemPrice,
        };
    
        return database().ref(currentUser.uid).update(updates);
      }
 

Это код плоского списка

 <View style={styles.listContainer}>
            <FlatList
              data={this.state.dataSource}
              renderItem={({item}) => (
                <View>
                  <TouchableWithoutFeedback
                    onPress={() =>
                      this.setState({
                        selecteditem: item,
                        itemname: item.name,
                        itemprice: item.price,
                      })
                    }>
                    <View style={styles.item}>
                      <Text
                        style={{
                          fontWeight: 'bold',
                          fontSize: 20,
                          paddingBottom: 10,
                          paddingRight: 150,
                        }}>
                        {item.name}{' '}
                      </Text>

                  <View
                    style={{
                      flexDirection: 'row',
                    }}>
                    <Text style={{fontSize: 15}}>Rs. {item.price}.00</Text>
                    <View style={{marginLeft: 200, marginTop: -10}}>
                      <Text
                        style={{color: COLORS.primary}}
                        onPress={() => this.deleteItem(item)}>
                        <View>
                          <Image
                            source={icons.del}
                            resizeMode="contain"
                            style={{
                              width: 20,
                              height: 20,
                              tintColor: COLORS.primary,
                            }}
                          />
                        </View>
                      </Text>
                    </View>
                  </View>
                </View>
              </TouchableWithoutFeedback>
            </View>
          )}
        />
        <Text />
 

 favouriteButton = (itemStatus = false) => {
/*Favourites*/
 return (
  <View style={{ justifyContent: "flex-end", alignItems: "flex-end" }}>
   <TouchableOpacity
    onPress={() => addToFavourites(item.menuId, item.name, item.price)}
   >
    <Image
      source={icons.like}
      resizeMode="contain"
      style={{
        width: 40,
        height: 40,
        marginLeft: 230,
        marginTop: -25,
        marginRight: 10,
        tintColor: itemStatus ? 'set fill color here' : COLORS.darkgray,
      }}
    />
    </TouchableOpacity>
  </View>
 );
}