Estoy codificando una aplicación de alarma en este momento y parece que no puedo descifrar cómo mostrar la imagen deseada. Hay dos estados:
En este momento, solo se muestra switchValue y funciona según verdadero/falso. Pero, ¿cómo puedo cambiar entre imágenes dependiendo de switchValue AND alarmValue AND undefined si la alarma no está conectada?
Obtengo 'switchValue' y 'alarmValue' a través del kit de herramientas redux.
Aquí está mi código:
import { useDispatch, useSelector } from 'react-redux'; import { toggleOn, toggleOff } from '../components/switch'; import { alarmOn, alarmOff} from '../components/alarm'; function Home({navigation}) { const imageAlarmOff = require('../images/Alarm_off.png'); // enabled but not triggered const imageAlarmOn = require('../images/Alarm_on.png'); // enabled and triggered const imageAlarmDisabled = require('../images/Alarm_off_disabled.png'); // disabled const imageAlarmUndefined = require('../images/Alarm_undefined.png'); // not connected const switchValue = useSelector((state) => state.switch.active); const alarmValue = useSelector((state) => state.alarm.active); const dispatch = useDispatch(); return ( <View style={globalStyles.containerBodyHome}> <View style={globalStyles.containerMainHome}> <ImageBackground style={globalStyles.imageHome} source={switchValue ? imageAlarmOff : imageAlarmDisabled} > </ImageBackground> </View> </View> ); } export default Home;Si entiendo correctamente, ¿le gustaría administrar varias imágenes?
Puede usar la declaración de cambio y basarse en switchValue para devolver la imagen apropiada.
function Home({navigation}) { const imageAlarmOff = require('../images/Alarm_off.png'); // enabled but not triggered const imageAlarmOn = require('../images/Alarm_on.png'); // enabled and triggered const imageAlarmDisabled = require('../images/Alarm_off_disabled.png'); // disabled const imageAlarmUndefined = require('../images/Alarm_undefined.png'); // not connected const switchValue = useSelector((state) => state.switch.active); const alarmValue = useSelector((state) => state.alarm.active); const dispatch = useDispatch(); const handleImage = () => { switch(switchValue) { case true: { if(alarmValue) return imageAlarmOn return imageAlarmOff } case false: { return imageAlarmDisabled } default: { return imageAlarmUndefined }}} return ( <View style={globalStyles.containerBodyHome}> <View style={globalStyles.containerMainHome}> <ImageBackground style={globalStyles.imageHome} source={handleImage()} > </ImageBackground> </View> </View> ); }