Javascript 省略号化位于两个其他文本之间的文本，而不将尾随文本调整到末尾

我有一个视图，其中包含

flexDirection:“行”

，它将包含3个文本元素。我希望文本元素一个接一个地流动，但是在空间有限的情况下，我希望中间的文本元素是省略的

例如，屏幕边缘在哪里

约翰·史密斯johnsmith@test.com19年9月24日|

但是如果设备很小

约翰·史密斯johnsmith@t.. 19年9月24日|

与另一个问题相关的解决方案建议将中间文本放在具有flex:1的视图中，这确实会导致中间文本成为省略文本（当我还指示numberOfLines和ellipsizeMode属性时），但会导致尾部文本被推到末尾，如下所示

约翰·史密斯johnsmith@test.com19年9月24日|

这是我不想要的

这是一份有代码的零食

或者这里是一个示例组件

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>
    );
  }
}

导出默认类App扩展React.Component{
render（）{
返回(
//如果空格很紧，我希望中间的文本被省略
约翰·史密斯
johnsmith@test.com
9/24/19
//如果有足够的空间，我希望日期立即跟在邮件后面，而不是推到最后
约翰·史密斯
johnsmith@test.com
9/24/19
);
}
}

这是我的解决方案：

在

视图中

：

约翰·史密斯johnsmith@test.com 9/24/19 我找不到一种方法将姓名和电子邮件分开，而不让姓名溢出到下一行

但是，使用嵌套的

Text

组件，可以获得类似的结果

---

在日期上设置

flex:1

可确保日期

Text

组件将尝试填充剩余空间。

如果将日期设置为使用

flex:1

而不是电子邮件，会怎么样？它似乎与父视图上的

flex:1

具有相同的效果