phản ứng: không thể nhận được ellipsizeMode để hoạt động

Question

Tôi đang cố gắng cắt ngắn văn bản trong ứng dụng phản ứng của mình. Tôi đã quyết định sử dụng thuộc tính "ellipsizeMode", nhưng tôi không thể làm cho nó hoạt động.

tôi đã viết một bản demo của vấn đề:

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

Bây giờ các văn bản không được cắt ngắn, bất kỳ ý tưởng tại sao?

Answer 1

Cố gắng gán một chuỗi để ellipsizeMode (loại bỏ các dấu ngoặc nhọn):

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

Answer 2

Hãy thử thiết lập một thuộc tính chiều rộng với thành phần

'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

tôi đã cùng một vấn đề, đó là đủ để có kích thước của phần tử được liên kết với một giá trị. Vì vậy, nếu bạn xác định chiều rộng, hoặc thêm một giá trị flex sẽ làm việc.

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