如何在firebase上更改“我的反应性”本机按钮组件的值
如何在firebase上更改“我的反应性”本机按钮组件的值
提问于 2022-01-03 04:55:41
我使用Flatlist (从firebase获取数据之后)呈现按钮，JSON对象如下所示
"DEVICES" : {
"6VnNdKZ8" : {
"switch_1" : {
"name" : "Air Conditioner",
"state" : "OFF"
},
"switch_2" : {
"name" : "Fan",
"state" : "OFF"
},
"switch_3" : {
"name" : "Light",
"state" : "OFF"
},
"switch_4" : {
"name" : "Power Socket",
"state" : "OFF"
}
}呈现的按钮如下所示
我想通过单击那个钳子将数据库中的"state“值更新为" on /OFF”，如何更新确切开关的值？
下面的代码显示了我如何从防火墙获取数据，并使用它来呈现我的开关
注意："items“是我的设备的uid，您可以忽略这个部分(如JSON文件中所示的”6VnNdKZ 8“)。
import React,{useEffect,useState} from 'react';
import {View, StyleSheet,Text,FlatList,Dimensions } from 'react-native';
import database from '@react-native-firebase/database';
import EmptyContainer from './EmptyContainer'
import AntDesign from 'react-native-vector-icons/AntDesign';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const Switches = ({items}) => {
const [switches, setSwitches] = useState(null)
const getDevice = async (data) => {
try {
database()
.ref('/DEVICES/'+data)
.on('value', (snapshot) => {
if (snapshot.val()) {
setSwitches(Object.values(snapshot.val()));
} else {
console.log("object");
}
});
} catch (error) {
console.log("error");
}
};
useEffect(() => {
getDevice(items);
}, [])
if(switches != null) {
return (
<FlatList
numColumns={2}
data = {switches}
keyExtractor={(item) => item.name}
renderItem={({ item })=>(
<View style={styles.buttonContainer}>
<AntDesign style={{marginTop:-20, paddingVertical: 10}} name="bulb1" size={25} color="#666" />
<Text style={styles.item}>{item.name}</Text>
</View>
)}
/>
);
}
return(
<EmptyContainer/>
)
}
export default Switches;
const styles = StyleSheet.create({
buttonContainer:{
marginTop:30,
padding:10,
height:150,
borderRadius:22,
backgroundColor: '#FFFFFF',
width: windowWidth/2.3,
marginHorizontal:10,
justifyContent: 'center',
color:'#383D41',
elevation: 4,
margin:5,
},
item:{
fontFamily:"SegoeUI",
color: '#383D41',
fontSize:18,
fontWeight: 'bold',
}
})回答 2
Stack Overflow用户
发布于 2022-01-03 05:32:47
useEffect(() => {
// update firebase func
}, [switches])
当更新开关状态也更新防火墙数据时
Stack Overflow用户
发布于 2022-01-03 05:49:20
更新updateValueinFirebase函数中的值，使用item属性可以找到当前值。将值从"OFF“更新为"ON”，然后重新获取数据；
import React,{useEffect,useState} from 'react';
import {View, StyleSheet,Text,FlatList,Dimensions } from 'react-native';
import database from '@react-native-firebase/database';
import EmptyContainer from './EmptyContainer'
import AntDesign from 'react-native-vector-icons/AntDesign';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const Switches = ({items}) => {
const [switches, setSwitches] = useState(null)
const getDevice = async (data) => {
try {
database()
.ref('/DEVICES/'+data)
.on('value', (snapshot) => {
if (snapshot.val()) {
setSwitches(Object.values(snapshot.val()));
} else {
console.log("object");
}
});
} catch (error) {
console.log("error");
}
};
useEffect(() => {
getDevice(items);
}, [])
const updateValueinFirebase = (item)=>{
// update the value here in item property can find the current value update the value from "OFF" to "ON" then refetch the data;
}
if(switches != null) {
return (
<FlatList
numColumns={2}
data = {switches}
keyExtractor={(item) => item.name}
renderItem={({ item })=>(
<View style={styles.buttonContainer} onPress={()=>{updateValueinFirebase(item)}}>
<AntDesign style={{marginTop:-20, paddingVertical: 10}} name="bulb1" size={25} color="#666" />
<Text style={styles.item}>{item.name}</Text>
</View>
)}
/>
);
}
return(
<EmptyContainer/>
)
}
export default Switches;
const styles = StyleSheet.create({
buttonContainer:{
marginTop:30,
padding:10,
height:150,
borderRadius:22,
backgroundColor: '#FFFFFF',
width: windowWidth/2.3,
marginHorizontal:10,
justifyContent: 'center',
color:'#383D41',
elevation: 4,
margin:5,
},
item:{
fontFamily:"SegoeUI",
color: '#383D41',
fontSize:18,
fontWeight: 'bold',
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70561811
复制相关文章
相似问题
腾讯云开发者
