0
309
Vistas¿Cómo mantener el estilo si deshabilita objetos en reaccionar nativo?
Estoy tratando de estructurar mi problema:
En qué estoy trabajando: estoy tratando de hacer una vista de horario de apertura en react-native (mecanografiado) donde puede activar y desactivar los días de la semana. Y para los días en que está en funcionamiento, puede establecer el horario de apertura a través del selector de tiempo. Igual que el de Google que ves aquí: Horario de apertura de Google
¿Cuál es mi problema? Ahora me encontré con problemas de estilo. Cuando apago un día, todo el contenido salta a la derecha. ¿Cómo debo estructurar y diseñar mis componentes?
Aquí está mi código
interface Props { day: String; } export function OpenTimesItem(props: Props) { const [isOn, setOn] = useState(true); const toggleOn = () => setOn(!isOn); return ( <View style={styles.dayContainer}> <Text>{props.day}</Text> <View> <Switch value={isOn} onValueChange={toggleOn} /> <Text>{isOn ? "Geöffnet" : "Geschlossen"}</Text> </View> {isOn ? ( <View style={styles.timePicker}> <TimePicker /> <Text>-</Text> <TimePicker /> </View> ) : ( <View style={styles.timePicker}></View> )} </View> ); } const styles = StyleSheet.create({ dayContainer: { borderBottomWidth: 1, borderBottomColor: "#D1D1D1", alignItems: "center", justifyContent: "space-between", flexDirection: "row", }, timePicker: { flexDirection: "row", alignItems: "center", }, });1 Respuestas
Responde la pregunta0
Puede usar flex: 1 y flex-end para lograr lo que desea. Tenga en cuenta que no tengo su componente TimePicker , por lo que he agregado un componente de texto ficticio en su lugar.
import React, { useState } from "react" import { StyleSheet, Switch, Text, View } from "react-native" interface Props { day: String } export function OpenTimesItem(props: Props) { const [isOn, setOn] = useState(true) const toggleOn = () => setOn(!isOn) return ( <View style={styles.dayContainer}> <Text style={styles.flex1}>{props.day}</Text> <View style={[styles.flex1, { alignItems: "center" }]}> <Switch value={isOn} onValueChange={toggleOn} /> <Text>{isOn ? "Geöffnet" : "Geschlossen"}</Text> <View style={styles.timePicker} /> </View> <View style={styles.flex1}> {isOn && ( <View style={{ flexDirection: "row", alignSelf: "flex-end" }}> <Text>10:22</Text> <Text>-</Text> <Text>10:25</Text> </View> )} </View> </View> ) } const styles = StyleSheet.create({ dayContainer: { borderBottomWidth: 1, borderBottomColor: "#D1D1D1", alignItems: "center", justifyContent: "space-between", flexDirection: "row", }, timePicker: { flexDirection: "row", alignItems: "center", }, flex1: { flex: 1, }, })Esto produce lo siguiente.
