0
157
VistasTexto multilínea en ancho de vista fijo - ¿Reaccionar nativo?
En un componente de encabezado, tengo una vista que tiene un ancho fijo, y el texto dentro de él está cortado, así que quiero que este texto sea como una línea múltiple,
No puedo eliminar el ancho fijo porque depende de otras cosas de desplazamiento.
const TAB_WIDTH = normalizeWidth(150); <FlatList data={myRoutes} ref={headerRef} contentContainerStyle={{ flexGrow: 1, }} keyExtractor={(item, index) => index.toString()} horizontal showsHorizontalScrollIndicator={false} renderItem={({item, index}) => ( <View style={{ width: TAB_WIDTH, }}> <TouchableOpacity onPress={() => scrollToActiveIndex(index)} style={styles.headerItem}> <Text style={[ styles.labelStyle, { color: activeIndex === index ? buttonBgColor : COLORS.menuText, }, ]}> {item.title}anas </Text> </TouchableOpacity> {activeIndex === index && ( <View style={[styles.headerBar, {backgroundColor: buttonBgColor}]} /> )} </View> )} />
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
puedes usar <Text numberOfLines={2}/>
verificar ellipsizeMode
·
Juan Pablo Isaza
Denunciar
0
También recibí el mismo error y apliqué ancho al componente de texto de esta manera
width: 'YOUR WIDTH'Puedes aplicar este código
<Text style={[ styles.labelStyle, { color: activeIndex === index ? buttonBgColor : COLORS.menuText, width: TAB_WIDTH }, ]}> {item.title}anas </Text>Si encuentras esto útil solo coméntame.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta