如何在两个单词之间创建一个动态的虚线(领导者)？

Question

React本机中有一个组件，它只显示如下所示的信息列表：

Device: Macbook
Port: 8080
OS: Darwin

但是，我想这样显示文本：

Device.........Macbook
Port..............8080
OS..............Darwin

考虑到大多数手机屏幕的尺寸可能不同，我如何实现这条虚线，使其动态地符合手机的尺寸，并且看起来很好/不会溢出到<View> / flexbox中的下一行

Answer 1

尝试添加borderRadius。

<View style={{
    borderStyle: 'dotted',
    borderWidth: 1,
    borderRadius: 1,
  }}>
</View>