reactnative: nie można uzyskać ellipsizeMode do pracy

Question

Próbuję skrócić tekst w mojej aplikacji reaktywnej. Zdecydowałem się użyć atrybutu "ellipsizeMode", ale nie mogę go uruchomić.

pisałem demo problemu:

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

Teraz tekst nie obcinane, jakiś pomysł dlaczego?

Answer 1

Spróbuj przypisanie ciąg ellipsizeMode (usuń nawiasy nawiasów):

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

Answer 2

Spróbuj ustawić właściwość stylu szerokość do komponentu

'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

miałem ten sam problem, to wystarczy, aby mieć rozmiar elementu związanego z wartością. Jeśli więc zdefiniujesz szerokość lub dodasz wartość flex, zadziała.

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