react-native - 如何在反应原生火基础应用程序中更改最喜欢的切换图标颜色?
问题描述
我正在为一家餐厅开发一个 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,
});
};
这是收藏项目列表截图 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>
);
}
推荐阅读
- mysql - 对新索引数据的 MYSQL 查询异常缓慢
- python - 减少水平颜色条填充
- c# - 2.5D 平台游戏,重力转移
- ajax - 使用 Ajax 将 pdf 发布到 Solr
- cdi - 如何将这个简单的 (IBM MQ) MDB 项目部署到 Tomee... - 成功部署需要什么配置
- java - 带有数学运算符和数组的 Java Return 方法
- dart - 我们应该在 Flutter 应用程序中混淆 Dart 代码吗?
- tensorflow - Tensorflow 中的归一化互信息
- wildfly - Wildfly Maven 插件不更新配置
- c# - 如何使用 Android 应用程序访问 https 网络服务?