React Native Text numberOfLines 1 文本跑出屏幕

Question

我有一个简单的联系人列表，我想在其中显示最后的消息。但不幸的是，文本从屏幕上消失了。这是我的代码：

（可读的时间戳应该在文本后面。）

View
  style={{
    fontSize: 16,
    backgroundColor: Green,
    flexDirection: "row",
    flex: 1,
  }}>
  <Text
    numberOfLines={1}
    style={{
      flex: 1,
      fontSize: 16,
    }}>
    {item.message}
  </Text>
  <View style={{marginRight: 20, backgroundColor: Yellow}}>
    <Text style={{fontSize: 16, color: 'blue'}}>{item.readableTimestamp}</Text>
  </View>
</View>

Answer 1

你可以试试这样的：

<View
  style={{
    fontSize: 16,
    backgroundColor: Green,
    justifyContent: "space-between",
    flexDirection: "row",
    flex: 1,
  }}
>
  <View style={{flex: 1}}>
    <Text numberOfLines={1} style={{fontSize: 16}}>
      {item.message}
    </Text>
  </View>
  <View style={{marginRight: 20, width: 50, backgroundColor: Yellow}}>
    <Text style={{fontSize: 16, color: 'blue'}}>{item.readableTimestamp}</Text>
  </View>
</View>

我认为将文本放在视图中并为时间戳指定专用宽度会迫使文本变成椭圆形。 space-between 也会强制时间戳到行尾。