Soy nuevo en reaccionar nativo, ¿cómo cambio dinámicamente el Zindex en reaccionar nativo? o ¿cómo puedo ocultar/mostrar usando alguna otra forma dinámica?
import { styles } from './App_styles'; export default function App() { return ( <View style={styles.body}> <Pressable onPress={()=>{styles.popup.zIndex=0}}> <View style={styles.popup}> </View> </Pressable> <View style={styles.main_content}> </View> </View> ); }App_styles:
export const styles = StyleSheet.create({ body:{ backgroundColor: 'gray', height:'100%', }, popup: { position:'absolute', backgroundColor: 'rgba(0,0,0, 0.5)', height:'100%', width:'100%', zIndex:1, alignSelf:'center', marginTop:'30%', }, main_content:{ backgroundColor: 'red', width:'100%', height:'100%' }, });No estoy seguro de cómo cambiar dinámicamente las propiedades en reaccionar nativo usando js
Puede usar el estado para actualizar el estilo de la ventana emergente:
import { styles } from './App_styles'; import {useState} from 'React'; export default function App() { const [zIndex, setZIndex] = useState(1); return ( <View style={styles.body}> <Pressable onPress={()=>{setZIndex(0)}}> <View style={[styles.popup, {zIndex: zIndex}]}> </View> </Pressable> <View style={styles.main_content}> </View> </View> ); }Solo usa el gancho useState
import { styles } from './App_styles'; export default function App() { const [show, setShow] = useState(true) return ( <View style={styles.body}> {show && <View style={styles.popup}> </View>} <TouchableOpacity onPress={()=>setShow(!show)}> <Text>Show/Hide</Text> </TouchableOpacity> <View style={styles.main_content}> </View> </View> ); }