es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Texto centrado alineado verticalmente en iOS.

20 Jul, 2023 Programación

¿Existe alguna forma de alinear verticalmente en el centro el texto dentro del TextInput en iOS? (no el TextInput en sí, sino su texto).

El TextInput tiene la propiedad multiline configurada como true.

He intentado utilizar “textAlignVertical: center”, pero no funciona en iOS. También necesito que la altura de entrada sea dinámica.

(Por favor, consulte mi código a continuación al leer la sección siguiente)

Lo que estoy tratando de lograr es evitar que el usuario vea cambios en la interfaz de usuario cuando el componente Text se transforma en un TextInput.

No estoy seguro si mi enfoque de alinear verticalmente el texto dentro del TextInput funcionará como espero. Además, ni siquiera puedo encontrar una forma de lograrlo. Así que estoy abierto a escuchar nuevas ideas creativas para abordar este problema.

import {TextInput, Pressable, Text, StyleSheet} from 'react-native'

function TextBlock() {
  const [editing, setEditing] = React.useState(false)
  const [text, setText] = React.useState('')
  const props = {}
  if(!editing) props.onPress = () => setEditing(true)
  return (
    <pressable {...props}="">
      {
        editing ? (
          <textinput style="{styles.text}" multiline="{true}" onblur="{()" ==""> setEditing(false)} value={text} onChangeText={t => setText(t)}/>
        ) : (
          <text style="{styles.text}">{text}</text>
        )
      }
    </textinput></pressable>
  )
}
const styles = StyleSheet.create({
  text: {
    fontSize: 14,
    paddingTop: 0,
    paddingBottom: 0,
    paddingRight: 0,
    paddingLeft: 0,
    lineHeight: 20,
    marginBottom: 0,
    marginTop: 0,
    marginLeft: 0,
    marginRight: 0,
    textAlignVertical: 'center',
    textAlign: 'left'
  }
})
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Desafortunadamente, no hay una forma directa de centrar verticalmente el texto dentro de un TextInput en iOS. Como mencionaste, la propiedad textAlignVertical no funciona en iOS.

    Una solución alternativa es utilizar un componente personalizado que emule la apariencia y el comportamiento de un TextInput, pero que en realidad consista en un componente Text y un componente Pressable transparente que lo sobrepone. De esta manera, puedes centrar verticalmente el texto dentro del componente Text utilizando las propiedades justifyContent y alignItems del contenedor padre.

    Aquí tienes un código de ejemplo para que puedas comenzar:

    import { Pressable, Text, View, StyleSheet } from 'react-native';

function TextInputVertical({ value, onPress, onBlur, onChangeText }) {
  const [editando, setEditando] = useState(false);
  const [valorActual, setValorActual] = useState(value);

  const manejarPulsacion = () => {
    setEditando(true);
    onPress?.();
  };

  const manejarDesenfoque = () => {
    setEditando(false);
    onBlur?.();
  };

  const manejarCambioTexto = (texto) => {
    setValorActual(texto);
    onChangeText?.(texto);
  };

  return (
    <view style="{styles.contenedor}">
      {editando ? (
        <view style="{styles.contenedorTextInput}">
          <textinput style="{styles.textInput}" multiline="{true}" value="{valorActual}" onblur="{manejarDesenfoque}" onchangetext="{manejarCambioTexto}"></textinput>
        </view>
      ) : (
        <pressable onpress="{manejarPulsacion}">
          <view style="{styles.contenedorTexto}">
            <text style="{valorActual" styles.texto="" :="" styles.textoplaceholder}="" numberoflines="{1}">
              {valorActual || 'Ingresa texto aquí'}
            </text>
          </view>
        </pressable>
      )}
    </view>
  );
}

const styles = StyleSheet.create({
  contenedor: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 8,
  },
  contenedorTextInput: {
    flex: 1,
    height: '100%',
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 8,
  },
  contenedorTexto: {
    flex: 1,
    height: '100%',
    justifyContent: 'center',
    paddingLeft: 8,
  },
  texto: {
    fontSize: 16,
    lineHeight: 24,
  },
  textoPlaceholder: {
    fontSize: 16,
    color: '#C6C6C6',
    lineHeight: 24,
  },
});

    En este ejemplo, el componente personalizado consiste en un contenedor con flexDirection establecido en “row” y alignItems establecido en “center”, lo cual alinea verticalmente los componentes hijos (TextInput y Text). Dentro del contenedor, hay dos componentes condicionales: un componente de entrada de texto (TextInput) y un componente de visualización de texto (Text dentro de un Pressable). El componente de visualización de texto contiene un componente Pressable transparente que activa el modo de edición al ser presionado. El componente de entrada de texto está anidado dentro de un contenedor con un color de fondo y un padding para emular la apariencia del campo de texto. Las propiedades justifyContent y alignItems del contenedor del componente de visualización de texto están establecidas en “center”, lo cual centra verticalmente el texto dentro del contenedor.

    Este componente personalizado no replica perfectamente el comportamiento de un TextInput nativo, pero puede ser una solución adecuada si necesitas centrar verticalmente el texto dentro de él.

Comments are closed.