Эллиптический текст, который находится между двумя другими текстами, не сгибая конечный текст до конца

Question

У меня есть представление с flexDirection: 'row', которое будет содержать 3 текстовых элемента.Я хочу, чтобы текстовые элементы перемещались один за другим, но в случае, когда пространство ограничено, я хочу, чтобы средний текстовый элемент был эллиптическим.

Пример.где |это край экрана

| John Smith johnsmith@test.com 9/24/19 |

, но если устройство маленькое

| John Smith johnsmith@t.. 9/24/19 |

Решение, связанное с другим предложенным вопросомпомещая средний текст в представление с помощью flex: 1, что приводит к тому, что средний текст становится эллиптическим текстом (когда я также указываю свойства numberOfLines и ellipsizeMode), но это приводит к тому, что завершающий текст толкается до конца, как показано ниже

| John Smith johnsmith@test.com 9/24/19|

которого я не хочу.

Вот закуска с кодом

https://snack.expo.io/Sk6_MldDH

Или вот пример компонента

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
      // If space is tight, I want the middle text ellipsized 

      <View style={{flexDirection: 'row', width: 250, borderWidth: 1}}>
       <Text>John Smith</Text>
       <View style={{flex: 1}}>
       <Text ellipsizeMode="tail" numberOfLines={1} style={{ color: 'gray', marginHorizontal: 8}}>johnsmith@test.com</Text>
       </View>
       <Text style={{ color: 'gray'}}>9/24/19</Text>
       </View>

      // If plenty of space, I want the date to immediately follow the email, not have it pushed to the end

      <View style={{flexDirection: 'row', width: 350, borderWidth: 1}}>
       <Text>John Smith</Text>
       <View style={{flex: 1}}>
       <Text ellipsizeMode="tail" numberOfLines={1} style={{ color: 'gray', marginHorizontal: 8}}>johnsmith@test.com</Text>
       </View>
       <Text style={{ color: 'gray'}}>9/24/19</Text>
       </View>
      </View>
    );
  }
}

Answer 1

Вот закуска с моим решением: https://snack.expo.io/rkEncIYvS

В пределах View:

<Text ellipsizeMode='tail' numberOfLines={1}>John Smith <Text style={{ color: 'gray', marginHorizontal: 8}}>johnsmith@test.com</Text></Text>
<Text style={{ color: 'gray', flex: 1}}>9/24/19</Text>

Я не смог найти способ разделить имя и адрес электронной почты отдельно без имениПереполнение следующей строки.

Однако с вложенными Text компонентами вы можете добиться аналогичного результата.

Установка flex: 1 на дату гарантирует, что компонент date Text будетпопытаться заполнить оставшееся место.