web-dev-qa-db-fra.com

réactif: impossible de faire fonctionner ellipsizeMode

J'essaie de tronquer un texte dans mon application réactive. J'ai décidé d'utiliser l'attribut "ellipsizeMode", mais je ne parviens pas à le faire fonctionner.

J'ai écrit une démo du problème:

'use strict';

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


export class EllipsizeModeTest extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{'first part | '}</Text>
                <Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}>
                    {'a text too long to be displayed on the screen'}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
    },
    text: {
        fontSize: 20,
    }
});

Maintenant, le texte ne soit pas tronqué, aucune idée pourquoi?

javascriptreactjsreact-native
12
aguilbau

J'ai eu le même problème, il suffit d'avoir la taille de l'élément lié à une valeur. Donc, si vous définissez la largeur, ou ajoutez une valeur flex, cela fonctionnera.

<View style={{width: 200}}><Text ellipsizeMode='tail' numberOfLines={1}></View>
6
Andrea Cresta

Essayez d’attribuer une chaîne à ellipsizeMode (supprimez les accolades):

<Text style={styles.text} numberOfLines={1} ellipsizeMode='tail'>
3
FuzzyTree

Essayez de définir une propriété de style width pour le composant.

'use strict';

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


export class EllipsizeModeTest extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{'first part | '}</Text>
                <Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}>
                    {'a text too long to be displayed on the screen'}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
    },
    text: {
        fontSize: 20,
        width: 100
    }
});
0
Nicolas Sefercheoglou