2016-10-08 7 views
8

私の反応するアプリケーションのテキストを切り詰めようとしています。私は "ellipsizeMode"属性を使用することに決めましたが、動作させることはできません。reactnative: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, 
    } 
}); 

今テキストは、なぜ任意のアイデアを切り捨て取得していませんか?

答えて

0

は(中括弧を削除)ellipsizeModeに文字列を代入してみてください。

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

は、私は同じ問題を抱えていた部品

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

に幅のスタイルプロパティを設定してみてください、それが持っているだけで十分です値にバインドされた要素のサイズしたがって、幅を定義するか、またはflex値を追加すると動作します。

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