如何在 React Native Fire 基础应用程序中更改最喜欢的切换图标颜色？

如何解决如何在 React Native Fire 基础应用程序中更改最喜欢的切换图标颜色？

我正在为一家餐厅开发 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>

点击收藏按钮后，将项目保存到实时数据库。 addtoFavorites()

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

这是收藏夹列表截图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>
 );
}