Texto

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Componente de React para mostrar texto.

Text admite anidamiento, estilos y manejo de toques.

En el siguiente ejemplo, el título anidado y el texto del cuerpo heredarán la fontFamily de styles.baseText, pero el título proporciona sus propios estilos adicionales. El título y el cuerpo se apilarán verticalmente debido a los saltos de línea literales:

Texto anidado

Tanto Android como iOS permiten mostrar texto formateado mediante la anotación de rangos de cadena con formatos específicos como negrita o color (NSAttributedString en iOS, SpannableString en Android). En la práctica, esto resulta tedioso. Para React Native, adoptamos el paradigma web donde puedes anidar texto para lograr el mismo efecto.

Internamente, React Native convierte esto en un NSAttributedString o SpannableString plano que contiene la siguiente información:

"I am bold and red"
0-9: bold
9-17: bold, red

Contenedores

El elemento <Text> es único en diseño: su contenido interno no usa Flexbox sino diseño de texto. Esto significa que los elementos dentro de <Text> ya no son rectángulos, sino que se ajustan al final de línea.

tsx

<Text>
  <Text>First part and </Text>
  <Text>second part</Text>
</Text>
// Text container: the text will be inline, if the space allows it
// |First part and second part|

// otherwise, the text will flow as if it was one
// |First part |
// |and second |
// |part       |

<View>
  <Text>First part and </Text>
  <Text>second part</Text>
</View>
// View container: each text is its own block
// |First part and|
// |second part   |

// otherwise, the text will flow in its own block
// |First part |
// |and        |
// |second part|

Herencia de estilos limitada

En la web, la forma habitual de establecer familia y tamaño de fuente para todo el documento es aprovechar propiedades CSS heredadas:

css

html {
  font-family:
    'lucida grande', tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  color: #141823;
}

Todos los elementos heredarán esta fuente a menos que ellos o sus padres especifiquen nuevas reglas.

En React Native somos más estrictos: debes envolver todos los nodos de texto en un componente <Text>. No puedes tener nodos de texto directamente bajo <View>.

tsx

// BAD: will raise exception, can't have a text node as child of a <View>
<View>
  Some text
</View>

// GOOD
<View>
  <Text>
    Some text
  </Text>
</View>

Tampoco puedes establecer fuentes predeterminadas para subárboles completos. Además, fontFamily solo acepta un nombre de fuente, a diferencia de font-family en CSS. La forma recomendada de mantener fuentes consistentes es crear un componente MyAppText con estos estilos y usarlo en toda tu app. También puedes derivar componentes específicos como MyAppHeaderText.

tsx

<View>
  <MyAppText>
    Text styled with the default font for the entire application
  </MyAppText>
  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

Suponiendo que MyAppText es un componente que renderiza sus hijos en Text con estilos, MyAppHeaderText se definiría así:

tsx

const MyAppHeaderText = ({children}) => {
  return (
    <MyAppText>
      <Text style={{fontSize: 20}}>{children}</Text>
    </MyAppText>
  );
};

Componer MyAppText así garantiza estilos base mientras permite agregar/sobrescribir en casos específicos.

React Native mantiene herencia de estilos, pero limitada a subárboles de texto. En este caso, la segunda parte será negrita y roja.

tsx

<Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>and red</Text>
</Text>

Creemos que este enfoque restringido produce mejores apps:

• (Desarrollador) Los componentes React priorizan aislamiento: Un componente debe verse/comportarse igual con mismas props sin importar dónde se use. Propiedades de texto heredadas romperían este aislamiento.

• (Implementador) Simplifica React Native: No necesitamos campo fontFamily en cada elemento ni recorrer el árbol hasta la raíz para cada nodo de texto. La herencia solo existe en el componente Text nativo sin filtrarse a otros componentes.

---

Referencia

Props

accessibilityHint

Una sugerencia de accesibilidad ayuda a los usuarios a entender qué sucederá al interactuar con el elemento cuando la etiqueta no lo aclara.

Type
string

---

accessibilityLanguage

iOS

Valor que indica qué idioma debe usar el lector de pantalla cuando el usuario interactúa con el elemento. Debe seguir la especificación BCP 47.

Consulta la documentación de iOS para accessibilityLanguage para más información.

Type
string

---

accessibilityLabel

Sobrescribe el texto que lee el lector de pantalla al interactuar con el elemento. Por defecto, la etiqueta se construye recorriendo todos los hijos y acumulando nodos Text separados por espacios.

Type
string

---

accessibilityRole

Indica al lector de pantalla que trate el elemento enfocado como si tuviera un rol específico.

En iOS, estos roles se asignan a rasgos de accesibilidad correspondientes. El botón de imagen tiene la misma funcionalidad que si el rasgo estuviera configurado como 'image' y 'button'. Consulta la guía de Accesibilidad para más información.

En Android, estos roles tienen funcionalidad similar en TalkBack a como los rasgos de accesibilidad funcionan en Voiceover en iOS.

Type
AccessibilityRole

---

accessibilityState

Indica al lector de pantalla que trate el elemento actualmente enfocado como si estuviera en un estado específico.

Puedes proporcionar un estado, ningún estado o múltiples estados. Los estados deben pasarse mediante un objeto, ej. {selected: true, disabled: true}.

Type
AccessibilityState

---

accessibilityActions

Las acciones de accesibilidad permiten que una tecnología asistencial invoque programáticamente las acciones de un componente. La propiedad accessibilityActions debe contener una lista de objetos de acción. Cada objeto debe incluir los campos name y label.

Consulta la guía de Accesibilidad para más información.

Type	Required
array	No

---

onAccessibilityAction

Se invoca cuando el usuario realiza acciones de accesibilidad. El único argumento es un evento que contiene el nombre de la acción a realizar.

Consulta la guía de Accesibilidad para más información.

Type	Required
function	No

---

accessible

Cuando se establece en true, indica que la vista es un elemento de accesibilidad.

Consulta la guía de Accesibilidad para más información.

Type	Default
boolean	true

---

adjustsFontSizeToFit

Especifica si las fuentes deben reducirse automáticamente para ajustarse a las restricciones de estilo dadas.

Type	Default
boolean	false

---

allowFontScaling

Especifica si las fuentes deben escalarse para respetar los ajustes de accesibilidad de Tamaño de texto.

Type	Default
boolean	true

---

android_hyphenationFrequency

Android

Establece la frecuencia de guionado automático al determinar saltos de palabra en Android API Level 23+.

Type	Default
enum('none', 'normal','full')	'none'

---

aria-busy

Indica que un elemento está siendo modificado y que las tecnologías asistivas pueden esperar a que finalicen los cambios antes de informar al usuario.

Type	Default
boolean	false

---

aria-checked

Indica el estado de un elemento seleccionable. Puede ser booleano o el string "mixed" para casillas mixtas.

Type	Default
boolean, 'mixed'	false

---

aria-disabled

Indica que el elemento es perceptible pero deshabilitado, por lo que no es editable ni operable.

Type	Default
boolean	false

---

aria-expanded

Indica si un elemento expandible está actualmente expandido o colapsado.

Type	Default
boolean	false

---

aria-label

Define un valor de cadena que etiqueta un elemento interactivo.

Type
string

---

aria-selected

Indica si un elemento seleccionable está actualmente seleccionado o no.

Type
boolean

dataDetectorType

Android

Determina los tipos de datos convertidos en URLs cliqueables en el elemento de texto. Por defecto, no se detecta ningún tipo de dato.

Solo puedes proporcionar un tipo.

Type	Default
enum('phoneNumber', 'link', 'email', 'none', 'all')	'none'

---

disabled

Android

Especifica el estado deshabilitado de la vista de texto para propósitos de prueba.

Type	Default
bool	false

---

dynamicTypeRamp

iOS

La rampa de Dynamic Type a aplicar a este elemento en iOS.

Type	Default
enum('caption2', 'caption1', 'footnote', 'subheadline', 'callout', 'body', 'headline', 'title3', 'title2', 'title1', 'largeTitle')	'body'

---

ellipsizeMode

Cuando numberOfLines está establecido, esta propiedad define cómo se truncará el texto. numberOfLines debe configurarse junto con esta propiedad.

Puede tomar uno de los siguientes valores:

• head - La línea se muestra de modo que el final encaje en el contenedor y el texto faltante al inicio se indica con puntos suspensivos. Ej: "...wxyz"

• middle - La línea muestra inicio y final en el contenedor, con texto faltante en medio indicado por puntos suspensivos. Ej: "ab...yz"

• tail - La línea muestra el inicio en el contenedor y texto faltante al final indicado por puntos suspensivos. Ej: "abcd..."

• clip - Las líneas no se dibujan más allá del borde del contenedor de texto.

En Android, cuando numberOfLines se establece en un valor superior a 1, solo el valor tail funcionará correctamente.

Type	Default
enum('head', 'middle', 'tail', 'clip')	tail

---

id

Usado para localizar esta vista desde código nativo. Tiene prioridad sobre la propiedad nativeID.

Type
string

---

maxFontSizeMultiplier

Especifica la escala máxima que una fuente puede alcanzar cuando allowFontScaling está activado. Valores posibles:

• null/undefined: hereda del nodo padre o valor global predeterminado (0)

• 0: sin máximo, ignora el valor padre/global

• >= 1: establece el maxFontSizeMultiplier de este nodo a este valor

Type	Default
number	undefined

---

minimumFontScale

Especifica la escala mínima que una fuente puede alcanzar cuando adjustsFontSizeToFit está habilitado (valores 0.01-1.0).

Type
number

---

nativeID

Usado para localizar esta vista desde código nativo.

Type
string

---

numberOfLines

Se utiliza para truncar el texto con puntos suspensivos después de calcular el diseño del texto, incluyendo ajustes de línea, de modo que el número total de líneas no exceda este valor. Establecer esta propiedad en 0 eliminará esta restricción, lo que significa que no se aplicará límite de líneas.

Esta propiedad se usa comúnmente con ellipsizeMode.

Type	Default
number	0

---

onLayout

Se invoca al montar y en cambios de diseño.

Type
({nativeEvent: LayoutEvent}) => void

---

onLongPress

Esta función se llama al mantener presionado (long press).

Type
({nativeEvent: PressEvent}) => void

---

onMoveShouldSetResponder

¿Esta vista desea "reclamar" la capacidad de responder a toques? Se llama para cada movimiento táctil en la View cuando no es la respondedora actual.

Type
({nativeEvent: PressEvent}) => boolean

---

onPress

Función llamada al presionar, activada después de onPressOut.

Type
({nativeEvent: PressEvent}) => void

---

onPressIn

Llamado inmediatamente cuando se inicia un toque, antes de onPressOut y onPress.

Type
({nativeEvent: PressEvent}) => void

---

onPressOut

Llamado cuando se libera un toque.

Type
({nativeEvent: PressEvent}) => void

---

onResponderGrant

La vista ahora responde a eventos táctiles. Es el momento de resaltar y mostrar al usuario lo que está ocurriendo.

En Android, devuelve true desde este callback para evitar que otros componentes nativos se conviertan en respondedores hasta que este termine.

Type
({nativeEvent: PressEvent}) => void ｜ boolean

---

onResponderMove

El usuario está moviendo su dedo.

Type
({nativeEvent: PressEvent}) => void

---

onResponderRelease

Se activa al finalizar el toque.

Type
({nativeEvent: PressEvent}) => void

---

onResponderTerminate

La capacidad de respuesta ha sido quitada de la View. Puede ser tomada por otras vistas después de llamar a onResponderTerminationRequest, o por el sistema operativo sin preguntar (ej: centro de control/notificaciones en iOS).

Type
({nativeEvent: PressEvent}) => void

---

onResponderTerminationRequest

Otra View quiere convertirse en respondedora y solicita a esta View que libere su capacidad de respuesta. Devolver true permite liberarla.

Type
({nativeEvent: PressEvent}) => boolean

---

onStartShouldSetResponderCapture

Si una View padre quiere evitar que una View hija se convierta en respondedora al iniciar un toque, debe tener este manejador que devuelva true.

Type
({nativeEvent: PressEvent}) => boolean

---

onTextLayout

Se invoca cuando cambia el diseño del texto.

Type
(TextLayoutEvent) => mixed

---

pressRetentionOffset

Cuando la vista de desplazamiento está deshabilitada, esto define qué tan lejos puede moverse tu toque fuera del botón antes de desactivarlo. Una vez desactivado, al moverlo de vuelta verás que el botón se reactiva. Mueve el toque varias veces mientras la vista de desplazamiento está deshabilitada. Pasa una constante para reducir asignaciones de memoria.

Type
Rect, number

---

role

role comunica el propósito de un componente a usuarios de tecnologías asistivas. Tiene precedencia sobre la propiedad accessibilityRole.

Type
Role

---

selectable

Permite al usuario seleccionar texto para usar las funciones nativas de copiar y pegar.

Type	Default
boolean	false

---

selectionColor

Android

Color de resaltado del texto.

Type
color

---

style

Type
Text Style, View Style Props

---

suppressHighlighting

iOS

Cuando es true, no se produce cambio visual al presionar el texto. Por defecto, un óvalo gris resalta el texto al presionar.

Type	Default
boolean	false

---

testID

Usado para localizar esta vista en pruebas end-to-end.

Type
string

---

textBreakStrategy

Android

Estrategia de ruptura de texto en Android API Level 23+. Valores posibles: simple, highQuality, balanced.

Type	Default
enum('simple', 'highQuality', 'balanced')	highQuality

---

lineBreakStrategyIOS

iOS

Establece la estrategia de salto de línea en iOS 14+. Valores posibles: none, standard, hangul-word y push-out.

Type	Default
enum('none', 'standard', 'hangul-word', 'push-out')	'none'

Definiciones de tipos

TextLayout

El objeto TextLayout es parte del callback TextLayoutEvent y contiene datos de medición para la línea de Text.

Ejemplo

js

{
    capHeight: 10.496,
    ascender: 14.624,
    descender: 4,
    width: 28.224,
    height: 18.624,
    xHeight: 6.048,
    x: 0,
    y: 0
}

Propiedades

Name	Type	Optional	Description
ascender	number	No	The line ascender height after the text layout changes.
capHeight	number	No	Height of capital letter above the baseline.
descender	number	No	The line descender height after the text layout changes.
height	number	No	Height of the line after the text layout changes.
width	number	No	Width of the line after the text layout changes.
x	number	No	Line X coordinate inside the Text component.
xHeight	number	No	Distance between the baseline and median of the line (corpus size).
y	number	No	Line Y coordinate inside the Text component.

TextLayoutEvent

El objeto TextLayoutEvent se devuelve en el callback tras cambios en el diseño del componente. Contiene una clave lines con un array de objetos TextLayout correspondientes a cada línea de texto renderizada.

Ejemplo

js

{
  lines: [
    TextLayout,
    TextLayout,
    // ...
  ];
  target: 1127;
}

Propiedades

Name	Type	Optional	Description
lines	array of TextLayouts	No	Provides the TextLayout data for every rendered line.
target	number	No	The node id of the element.