只需添加borderRadius它就会起作用

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

像这样写你的代码：

<View style={{ height: 1, width: '100%', borderRadius: 1, borderWidth: 1, borderColor: 'red', borderStyle: 'dotted' }} />

如果您不喜欢那样，这是最终答案（我用“虚线”边框样式写了这个，以便更清楚地看到。

<View style={{ height: 1, width: '100%', borderRadius: 1, borderWidth: 1, borderColor: 'red', borderStyle: 'dashed', zIndex: 0, }}>
  <View style={{ position: 'absolute', left: 0, bottom: 0, width: '100%', height: 1, backgroundColor: 'white', zIndex: 1 }} />
</View>

或者，如果你想要一条水平虚线，你可以这样做：

    <Text ellipsizeMode="clip" numberOfLines={1}>
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - - - - - - - - - - - - - - - -
    </Text>

您可以使用以下库来帮助您将设计实现为dotted.

react本机破折号

一个超级简单的组件，用于 react-native 绘制可自定义的虚线

安装

npm i --save react-native-dash

用法

import Dash from 'react-native-dash';

//draws a horizontal dashed line with defaults. Also works with flex
render() {
    return <Dash style={{width:100, height:1}}/>
}

//draws a vertical dashed line with defaults.
render() {
    return <Dash style={{width:1, height:100, flexDirection:'column'}}/>
}

您可以获得更多信息，然后可以访问上面的链接。

谢谢