React-Native: Избегайте Переноса Текста

У меня есть название песни и ее длительность показывать в одной строке. Название песни должно показывать многоточие, но продолжительность никогда не должна обертывать или показывать многоточие. Я пробовал несколько комбинаций, но не смог сделать эту работу правильной для длинных названий. Продолжительность либо выключается, когда имя показывает многоточие или длительность обертывания. Я не могу жестко кодировать фиксированную ширину по продолжительности, поскольку она может изменять размер.

<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>
9
flexbox layout react-native

2 ответов

решение оказалось довольно простым. Не совсем интуитивно, но вот как это решить. Похоже, что текст, который нуждается в многоточии, требует flex: 1.

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

возможно, ниже Решение должно насытить ваш 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>
    );

пожалуйста, ref React-Native: Избегайте Обертывания Текста для получения более подробной информации и любезно игнорировать marginTop: 50, это для демо.

пожалуйста, проверьте и дайте мне знать, если не работает.

1