reactnative : ellipsizeMode가 작동하지 않습니다.

Question

반응탄에있는 텍스트를 잘라내려고합니다. "ellipsizeMode"속성을 사용하기로 결정했으나 제대로 작동하지 않습니다.

이

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

지금 텍스트를 절단하지 않고, 왜 어떤 생각 :

나는 문제의 데모를 썼다?

Answer 1

ellipsizeMode에 문자열 (중괄호 제거) 지정하십시오 :

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

Answer 2

내가 같은 문제가 없었다 구성 요소

'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

에 폭 스타일 속성을 설정하는 시도를, 그것을 가지고 충분 값에 바인드 된 요소의 크기. 그래서 너비를 정의하거나 flex 값을 추가하면 작동합니다.

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