rectnative: kann ellipsizeMode nicht zum arbeiten

Question

Ich versuche, einen Text in meiner rectnative App zu kürzen. Ich habe mich entschieden, das Attribut "ellipsizeMode" zu verwenden, aber ich kann es nicht zum Laufen bringen.

Ich schrieb eine Demo des Problems:

'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, 
    } 
}); 

Jetzt ist der Text nicht abgeschnitten bekommt, eine Idee, warum?

Answer 1

versuchen, eine Zeichenfolge zu ellipsizeMode (entfernen Sie die geschweiften Klammern) zuweisen:

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

Answer 2

Versuchen Sie, eine Breite Stil-Eigenschaft auf die Komponente Einstellung

'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 
    } 
}); 

Answer 3

ich hatte das gleiche Problem, es ist genug, um die Größe des Elements, das an einen Wert gebunden ist. Wenn Sie also die Breite definieren oder einen Flex-Wert hinzufügen, funktioniert das.

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