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

万一您不喜欢它，这是最终的答案（为了更清晰地看到，我用'dashed'borderStyle编写了此代码。

<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

您也可以尝试使用它，它会给您完美的虚线。

Open

Answer 5

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

react-native-dash

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

安装

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

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

谢谢

Answer 6

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

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

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

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

P.S。 react-native-dash不起作用。

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

Answer 9

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

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

<DashedLine dashLength={5} />

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

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

9 个答案: