React Native Text выходит из контейнера

У меня есть текст в контейнере представления, подобном этому

<View
  style={{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'grey'
  }}
>
  <Text>Long Text Here</Text>
</View>

Мой результат примерно такой

введите здесь описание изображения

Если я добавлю <Text numberOfLines={4}>, это работает нормально, но я хочу, чтобы мой текст полностью помещался в поле зрения, и если он выходит за пределы, он будет показывать три точки. Я не уверен, сколько строк будет достаточно, так как они будут отличаться для разных размеров экрана.


react-native javascript
person Daniyal Awan    schedule 20.02.2019    source источник
comment
Этот вопрос может оказаться полезным для вас: stackoverflow.com/questions/45290420/. Настройка flex — распространенный обходной путь. Решение, связанное с динамическим размером шрифта, будет дорогостоящим IMO.   -  person blaz    schedule 20.02.2019

Ответы (2)


arrow_upward
0
arrow_downward

Сделайте ваш контейнер прокручиваемым, тогда данные останутся внутри контейнера. Использовать

<ScrollView>
 // data
</ScrollView>
person AHMAD ASHFAQ    schedule 20.02.2019
comment
Это вариант, но у меня включено нажатие на плитки, это будет мешать прокрутке. Я просто хочу три точки, без явного указания numberOfLines - person Daniyal Awan; 20.02.2019
comment
Использовать количество строк '‹Text numberOfLines={2}› Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. ' - person AHMAD ASHFAQ; 20.02.2019

arrow_upward
0
arrow_downward

Вы можете использовать это в <Text>,

numberOfLines={10}  // obviously whatever no. of lines you want
ellipsizeMode="tail"

это поставит ..., когда превысит строки

person Jaydeep Galani    schedule 20.02.2019
comment
Я понимаю, но давайте предположим, что 10 строк — это нормально в iPad, но на меньшем экране, таком как iPhone, тогда 5 строк являются ограничением, тогда не будет ... таких точек. Поэтому я просто хочу, чтобы хвост или три точки появлялись, когда он выходит за пределы, несмотря на количество строк. - person Daniyal Awan; 20.02.2019