如何在firebase上更改我的ReactNative按鈕組件的值

我正在使用 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"
  }
}

這是渲染按鈕的樣子

我想通過單擊該夾子將資料庫上“狀態”的值更新為“開/關”如何更新確切開關的值

下面的代碼顯示了我如何從 FIREBASE 獲取資料并用于渲染我的開關

注意：“專案”是我的設備的 uid，對于這種情況，您可以忽略該部分（“6VnNdKZ8”），如 JSON 檔案中所示

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',
    }
  })

uj5u.com熱心網友回復：

useEffect(() => {
    // update firebase func
  }, [switches])

當更新切換狀態時也會更新 Firebase 資料

https://reactjs.org/docs/hooks-effect.html

uj5u.com熱心網友回復：

更新 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',
    }
  })

標籤：

上一篇：如何在螢屏過渡影片期間防止用戶互動？

下一篇：無法在nodeJS中匯入cloudinary并出現“導航器未定義”錯誤