如何在本机反应中显示虚线

Question

我需要在视图中显示虚线

我已经尝试borderTopWidth: 1, borderStyle: 'dashed'过了。

Answer 1

或者，如果您想要水平虚线，也可以这样做：

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

Answer 2

只需添加borderRadius它将起作用

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

Answer 3

像这样写你的代码：

<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>

Answer 4

你也可以试试这个，它会给你完美的虚线。

<View style={{borderWidth:0.3, borderStyle:'dashed', borderRadius:1,borderColor:'black'}}></View>

Answer 5

import React from "react";
import * as Svg from "react-native-svg";

type IVerticalDashedLine = {
  height: number;
  width: number;
  color: Svg.Color;
};

export default function VerticalDashedLine({
  height,
  width,
  color,
}: IVerticalDashedLine) {
  return (
    <Svg.Svg height={height} width={width} style={{ alignSelf: "center" }}>
      <Svg.Line
        stroke={color}
        strokeWidth={width}
        strokeDasharray="3, 2"
        x1="0"
        y1="0"
        x2="0"
        y2={height}
      />
    </Svg.Svg>
  );
}

Answer 6

您可以使用下面的库来帮助您实现您的设计dotted。

反应本机破折号

一个超级简单的组件，用于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'}}/>
}

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

谢谢