В React-Native
, как и в CSS
, есть возможность обрезать текст, если он не помещается. ? даже сделать это более гибко. Если в CSS
пока есть только возможность добавить три точки в конце строки (через свойство text-overflow), то в React-Native
вы можете указать, где эти три точки будут: в начале строки, в конце или в середине! Но есть небольшое замечание: узел Text
должен быть непосредственным потомком узла View
. Вот пример кода:
Вот так не работает
<View>
<Touchable>
<Text numberOfLines={1}
ellipsizeMode="middle"
>{attachment.name}</Text>
</Touchable>
</View>
А вот так все хорошо!
<View>
<Touchable>
<View>
<Text numberOfLines={1} //указываете допустимое количество строк для текста
ellipsizeMode="middle" //место, где будет разрыв текста в три точки (возможно указать 'head', 'middle', 'tail', 'clip'. 'clip' только для iOS)
>{attachment.name}</Text>
</View>
</Touchable>
</View>