javascript - react native Android : Contain text to inside parent view on a single line

Question

下左图是当前在我的 React-Native 元素中显示文本的方式，但我希望文本像右图一样显示(用 Swift 制作)。

有3个主要区别

1. 如果要打印的文本足够长，左侧的文本会打印两行，在 iOS 上，单词的末尾会被 chop ，有时会在字母的中间(所以你只能看到左侧) A之类的。)
2. 左侧的文字有时会打印在按钮外部(如 p 等字母)
3. 如果文本太长，右侧的文本会将单词中间替换为...
   • 我想要这种效果，或者缩小文本大小以适合按钮内的文本

<小时/>

这是我的这些按钮的组件，里面有文本

<TouchableOpacity style={styles.button} onPress={onPrs} >
    <Text style={styles.text}>{props.name}</Text>
    {premiumLabel}
</TouchableOpacity>

这就是我为它们使用的样式

const styles = StyleSheet.create({
...
    button:{
        backgroundColor: '#37E8E8',
        justifyContent: 'center',
        width:'31%',
        borderRadius: 5
    },
...

Answer 1

您必须使用ellipsizeMode支持Text它定义了如何 chop 文本。根据您的要求，我们必须使用ellipsizeMode="middle" ，它适合容器中的文本，中间缺失的文本由省略号 ( ... ) 指示。

ellipsizeMode理想情况下与另一个 Prop 一起使用，即 numberOfLines ，但这即使只是 width 也会起作用。指定为Text ，你的情况并非如此。因此，numberOfLines={1}还应该添加。

为了得到想要的效果，可以使用这个

<TouchableOpacity style={styles.button} onPress={onPrs} >
    <Text style={styles.text} ellipsizeMode="middle" numberOfLines={1}>{props.name}</Text>
    {premiumLabel}
</TouchableOpacity>

了解更多关于 ellipsizeMode 的信息