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

【问题标题】：How can I display dotted line in react native如何在本机反应中显示虚线
【发布时间】：2019-04-09 08:56:42
【问题描述】：

我需要在视图中显示虚线

我已尝试borderTopWidth: 1, borderStyle: 'dashed' 进行查看。

【问题讨论】：

注意：在撰写本文时，将 borderStyle 应用于单个边框边缘在 React Native 0.63.2 中被破坏，但有一个开放的 PR 可以解决此限制：github.com/facebook/react-native/pull/29099
2021 年 - 你猜怎么着？ - 那个 PR 仍然处于开放状态，被 React Native 团队完全忽略，积累了几十个“嘿，这里发生了什么？”厘米。唉……至少机器人还没有关闭它……

【解决方案1】：

只需添加borderRadius就可以了

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

【讨论】：

包括一个演示屏幕截图对于使这个答案成为一个值得信赖的答案大有帮助
我在 react-native 0.63 中得到 Unsupported dashed / dotted border style
这得到 4 边边框而不是虚线。这不是这个问题的“正确”答案。

【解决方案2】：

这样写你的代码：

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

【讨论】：

【解决方案3】：

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


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

【讨论】：

如果您要进行此 hack，请务必在屏幕阅读器（Android TalkBack 和 iOS VoiceOver）上进行测试，以确保屏幕阅读器用户无需通过“连字符”之类的内容进行收听hyphen hyphen hyphen hyphen hyphen hyphen hyphen hyphen hyphen ..." - reactnative.dev/docs/accessibility
这个解决方案更好。

【解决方案4】：

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

react-native-dash

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'}}/>
}

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

谢谢

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

TL;DR：如果您需要任何类型的控制，而不是 hacky 解决方案，请使用第三方解决方案，例如 react-native-dash。

在 React Native 中没有简单的方法来画一条虚线（至少从 2019 年 5 月的 0.59 版开始）。在<View /> 组件上使用dotted 或dashed borderStyle 之类的问题在于它将应用于该视图框的所有4 个侧面。这意味着您将获得超级紧密的点和破折号分组，没有用于控制破折号或点间距或大小的开箱即用解决方案。可以做一个简单的虚线框，但不是一条线。

【讨论】：

不幸的是，该库似乎不再维护，并且它对 react-native-measureme 的使用已被证明存在局限性（请参阅issue）
对于那些在使用react-native-dash 时遇到问题的人，我使用钩子和功能组件编写了自己的（无依赖）版本，称为react-native-dashed-line

【解决方案7】：

感谢@Amir Gorji 的这个。如果您只希望视图边框的一侧被虚线，例如底部的一侧，请使用：

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

它并不完美，但它是我能找到的最好的。

附： react-native-dash 不起作用。

【讨论】：

【解决方案8】：

我的虚线解决方案适用于使用“-”（负号）的水平和纵向模式。

调整 fontSize 和 letterSpacing 以获得所需的结果，因为此示例的 fontFamily 是 OpenSans。结果可能不同。

import React from 'react';
import {color} from '../../theme';
import {View} from 'react-native';
import {Text} from '../text';

const CONTAINER = {
  flexDirection: 'row',
  justifyContent: 'center',
  overflow: 'hidden',
  width: '100%',
};

const DASHED = {
  color: color.primary,
  letterSpacing: -1.87,
  fontSize: 18,
};

export function Divider() {
  return (
    <View style={CONTAINER}>
      {[...Array(60)].map((_, ind) => {
        return (
          <Text key={ind} style={DASHED}>
            {' '}
            --{' '}
          </Text>
        );
      })}
    </View>
  );
}

【讨论】：

【解决方案9】：

一些人建议使用react-native-dash 库，该库现在似乎没有维护并且需要第三方依赖项（这可能会导致issues）。

另一种解决方案是react-native-dashed-line 包，它使用钩子和功能组件从头开始编写。它没有依赖关系，可以如下使用

<DashedLine dashLength={5} />

<DashedLine dashLength={10} dashThickness={8} />

【讨论】：

【解决方案10】：

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>
  );
}

【讨论】：