React-Native: Avoid Text Wrapping

问题

I have the title of a song and its duration showing in one line. The song title needs to show an ellipsis but the duration should never wrap or show ellipsis. I've tried several combinations but fail to make this work right for long titles. The duration either goes off screen when the name shows ellipsis or the duration wraps. I can't hardcode a fixed width on the duration as it can change size.

<View style={{flexDirection: 'row'}}>
    <Text numberOfLines={2} style={{fontSize: 16, textAlign: 'left'}}>{title}</Text>
    <Text style={{flex: 1, fontSize: 13, textAlign: 'right', marginTop: 2}}>{duration}</Text>
</View>

回答1:

The solution ended up being fairly simple. Not entirely intuitive but here's how to solve this. It appears that the text that needs ellipsis requires flex: 1.

 <View style={{ flexDirection: "row" }}>
<Text numberOfLines={1} style={{ flex: 1, textAlign: "left" }}>
    {title}
</Text>
<Text style={{ textAlign: "right" }}>{duration}</Text>
</View>;

回答2:

Possibly below solution should satify your creteria

 return (
        <View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-around', marginTop: 50}}>
            <Text numberOfLines={2} style={{fontSize: 16, flex: 1}}>{title}</Text>
            <Text style={{fontSize: 13, marginTop: 2}}>{duration}</Text>
        </View>
    );

Please ref React-Native: Avoid Text Wrapping for more details and kindly ignore marginTop: 50, it's for demo.

Please check and let me know if does not work.

来源：https://stackoverflow.com/questions/43074659/react-native-avoid-text-wrapping

标签

layout

react-native

flexbox