Cómo configurar el texto <Text> en mayúsculas en react native

85

Cómo establecer <Text> some text </Text>como mayúsculas en react native

<Text style={{}}> Test </Text>

Necesito mostrar esa prueba como PRUEBA.

react-native Thivya
fuente
19
<Text style={{}}> {'Test'.toUpperCase()} </Text>
Ivan Chernykh

Respuestas:

125

Se ha agregado compatibilidad con iOS textTransform a react-native en la versión 0.56. Se ha añadido compatibilidad con Android textTransform en la versión 0.59. Acepta una de estas opciones:

  • ninguna
  • mayúsculas
  • minúscula
  • capitalizar

El compromiso real de iOS , el compromiso de Android y la documentación

Ejemplo:

<View>
  <Text style={{ textTransform: 'uppercase'}}>
    This text should be uppercased.
  </Text>
  <Text style={{ textTransform: 'capitalize'}}>
    Mixed:{' '}
    <Text style={{ textTransform: 'lowercase'}}>
      lowercase{' '}
    </Text>
  </Text>
</View>
Negro
fuente
113

@Cherniv Gracias por la respuesta

<Text style={{}}> {'Test'.toUpperCase()} </Text>
Thivya
fuente
6
Ésta no es realmente una solución. ¿Qué pasa si quiero animar el texto a mayúsculas?
Michal
16
@Michal cómo se vería la animación de texto en mayúsculas, suena como un efecto súper genial, simplemente no puedo imaginarlo en este momento.
Noitidart
2
@Michal Usa Lottie para hacer animaciones geniales, incluso con texto. Puede crear animaciones personalizadas a través de Adobe After Effects, Example .
Yeshan Jay
6
Esta ya no es la respuesta correcta. Hay un estilo predeterminado en React Native para la transformación de texto. Por favor, compruebe mi respuesta a continuación.
Negro
3

La función React Native .toUpperCase () funciona bien en una cadena, pero si usó numberso other non-string data types, no funciona. El errores que ha ocurrido.

Debajo de dos están las propiedades de la cadena: 

<Text>{props.complexity.toUpperCase()}</Text>

<Text>{props.affordability.toUpperCase()}</Text>
Najathi
fuente