React Native中View仅设置上下虚线边框无效，求解决方案

你遇到的问题其实是React Native当前的一个已知限制：borderStyle: 'dashed' 仅在设置了全局 borderWidth（即四个边都有边框宽度）时才会生效，单独为某几个边设置 borderTopWidth/borderBottomWidth 搭配 borderStyle 是无法渲染出虚线效果的。

不过有几个简单的方法可以实现你想要的样式，推荐优先用第一种：

方法1：全局边框+隐藏多余边（最简洁） #

先给View设置完整的虚线边框样式，再把不需要的左右边框宽度设为0，这样就只保留顶部和底部的虚线：

<View style={{
  backgroundColor: 'white',
  borderRadius: 10,
  marginHorizontal: 20,
  padding: 16,
  // 全局虚线边框配置
  borderStyle: 'dashed',
  borderColor: 'red',
  borderWidth: 1,
  // 隐藏左右边框
  borderLeftWidth: 0,
  borderRightWidth: 0,
}}>
  {...content...}
</View>

这种方法完全使用React Native原生样式属性，没有额外嵌套，兼容性也很好。

方法2：用线性渐变模拟虚线（灵活度更高） #

如果需要更自定义的虚线样式（比如不同的虚实比例），可以用repeating-linear-gradient来绘制独立的顶部和底部虚线：

import { View } from 'react-native';

<View style={{
  backgroundColor: 'white',
  borderRadius: 10,
  marginHorizontal: 20,
  padding: 16,
}}>
  {/* 顶部虚线 */}
  <View style={{
    width: '100%',
    height: 1,
    backgroundImage: 'repeating-linear-gradient(to right, red 0px, red 4px, transparent 4px, transparent 6px)',
    marginBottom: 16, // 和内容保持间距，可根据需求调整
  }} />
  
  {/* 你的内容区域 */}
  {...content...}
  
  {/* 底部虚线 */}
  <View style={{
    width: '100%',
    height: 1,
    backgroundImage: 'repeating-linear-gradient(to right, red 0px, red 4px, transparent 4px, transparent 6px)',
    marginTop: 16, // 和内容保持间距，可根据需求调整
  }} />
</View>

你可以修改渐变参数里的数值来调整虚线的长度（red 0px, red 4px）和间距（transparent 4px, transparent 6px），实现更个性化的效果。

内容的提问来源于stack exchange，提问作者Roshan Maddumage