Question

我试图截断我的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,
    }
});

现在文字没有被截断，任何想法为什么？

Answer 1

我有同样的问题，它足以让元素的大小绑定到一个值。因此，如果您定义宽度，或添加弹性值将起作用。

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

try
        {
            WebClient client1 = new WebClient();
            getLatestTextFile();
            Uri ll = new Uri("https://github.com/gitmessAround/JustText");
            StreamWriter w = File.AppendText("justText.txt");
            w.WriteLine("hello world");
            w.Close();
            client1.UploadFile(ll,"justText.txt");


            MessageBox.Show("Updated");
        }
        catch (TimeoutException ex)
        {
            MessageBox.Show("Time out\n\n" + ex);
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
        }

reactnative：无法让ellipsizeMode工作

4 个答案: