Estoy tratando de usar componentes_estilizados para reemplazar algunos textos cuando la línea se rompe con los siguientes estilos css :
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;Pero cuando uso estilos de desbordamiento de texto y/o espacios en blanco , tengo un error, porque textOverflow y whiteSpace no son una propiedad de estilo válida.
¿Cómo aplicar esos estilos con styled_components o React Native StyleSheet?
¡Gracias!
Versión React, React Native y Styled Components
{ "react": "16.13.1", "react-native": "0.63.4", "styled-components": "^5.2.1" }La solución a ese problema es flexShrink: 1.
<View style={{ flexDirection: 'row' }}> <Text style={{ flexShrink: 1 }}> Really really long text... </Text> </View>Dependiendo de su configuración, es posible que también deba agregar flexShrink: 1 al padre de , para que esto funcione, así que juegue con eso y lo logrará.
¡Encontré la respuesta a mi pregunta!
Acabo de agregar accesorios numberOfLines y ellipsizeMode a mi componente de texto y todo funcionó bien.