反应性：无法让 ellipsizeMode 工作答案

【问题标题】：reactnative : can't get ellipsizeMode to work反应性：无法让 ellipsizeMode 工作
【发布时间】：2016-10-08 11:40:15
【问题描述】：

我正在尝试在我的 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,
    }
});

现在文本没有被截断，知道为什么吗？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

我遇到了同样的问题，将元素的大小绑定到一个值就足够了。所以如果你定义宽度，或者添加一个 flex 值就可以了。

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

【讨论】：

添加flex: 1 对我有用，谢谢！

【解决方案2】：

您需要在 Text 元素上设置一个宽度，以便它知道何时...

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
    },
    text: {
        fontSize: 20,
        width: 100
    }
});

【讨论】：

【解决方案3】：

尝试将字符串分配给ellipsizeMode（去掉大括号）：

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

【讨论】：

【解决方案4】：

尝试为组件设置宽度样式属性

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

【讨论】：

我试过这个但是没有得到省略号，而是文本被突然剪切。