React native 如何在react native fire base应用程序中更改喜爱的切换图标颜色？

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

这是收藏夹项目列表屏幕截图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 />

(
这是我的国家({
选择编辑项：项目，
itemname:item.name，
itemprice:item.price，
})
}>
{item.name}{'}
卢比{项目价格}.00
this.deleteItem（项目）}>
)}
/>

FavoriteButton=（itemStatus=false）=>{
/*宠儿*/
返回(
addToFavourites（item.menuId、item.name、item.price）}
>
);
}

谢谢您的回答，那么我如何使用实时数据库来更改此设置？？

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