Javascript reactnative:can'；我不能让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,
    }
});

“严格使用”；
从“React”导入React，{Component}；
进口{
样式表，
文本，
看法
}从“反应本机”；
导出类EllipsizeModeTest扩展组件{
render（）{
返回(
{'第一部分|'}
{'文本太长，无法在屏幕上显示'}
);
}
}
const styles=StyleSheet.create({
容器：{
flexDirection:'行'，
},
正文：{
尺寸：20，
}
});

---

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

尝试将字符串分配给

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,
        width: 100
    }
});

“严格使用”；
从“React”导入React，{Component}；
进口{
样式表，
文本，
看法
}从“反应本机”；
导出类EllipsizeModeTest扩展组件{
render（）{
返回(
{'第一部分|'}
{'文本太长，无法在屏幕上显示'}
);
}
}
const styles=StyleSheet.create({
容器：{
flexDirection:'行'，
},
正文：{
尺寸：20，
宽度：100
}
});

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

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

---

您需要设置文本元素的宽度，以便它知道何时。。。它

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

---

我尝试了这个方法，但没有得到省略号，相反，文本被突然剪切。

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