Estoy tratando de ajustar el ancho de una vista y el color de acuerdo con una variable. Inicialmente declaro la variable dentro de la aplicación que no parece funcionar. También intenté declarar la variable fuera del alcance de la función pero no se registra. ¿Hay alguna forma en que pueda editar dinámicamente el ancho del niño usando la variable declarada? ¿O hay una función que me permite hacer esto?
const app = () =>{ const childWidth = 50; const viewColor = 'red' return( <View style={styles.parent}> <View style={styles.child}>CHILD</View> </View> )} styles = styleSheet.create({ parent:{ width: 100, color: 'white', }, child:{ width: {childWidth}, color: {viewColor}, } })Gracias por adelantado
Supongo que desea editar el ancho dinámicamente, así que cambiémoslo usando un InputText.
primero vamos a crear nuestro enlace useState.
const myFunc = () =>{ const [width , setWidth] = useState("50px") return( <> <TextInput onChangeText={setWidth} value={width} /> //let's assume you want to change the width of this element. <element style={{width : {width} }} </> )exportación predeterminada...
te sugiero que puedas usar estilos en condiciones
const app = () =>{ const isChildOneStyle = true return( <View style={styles.parent}> <View style={isChildOneStyle ? styles.child1 : styles.child2}>CHILD</View> </View> )} styles = styleSheet.create({ parent:{ width: 100, color: 'white', }, child1:{ width: 50, color: 'red', }, child2:{ width: 80, color: 'green', }, }) or you can overrite style const app = ({customStyles}) =>{ return( <View style={styles.parent}> <View style={[styles.child, customStyles]}>CHILD</View> </View> )}o si recuperó estos parámetros de api, puede hacer esto
const app = ({customWidth, customColor}) =>{ return( <View style={styles.parent}> <View style={[styles.child, { width :customWidth , color: customColor }]}>CHILD</View> </View> )}