How can I display dotted line in react native

问题:

I need to display a dotted line in a view

I have tried borderTopWidth: 1, borderStyle: 'dashed' for a view.

回答1:

Just add borderRadius it will work

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

回答2:

You can use below library that will help you to achieve your design as dotted.

react-native-dash

A super simple component for react-native to draw customisable dashed lines

Installation

npm i --save react-native-dash

Usage

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

You can get more information then may visit above link.

Thank you

回答3:

TL;DR: If you need any kind of control, and not a hacky solution, use a third-party solution like react-native-dash.

There is no easy way to make a dotted line in React Native (at least as of version 0.59, May 2019). The problem with using something like a dotted or dashed borderStyle on a <View /> component is that it will apply to all 4 sides of that view box. That means you will get super tight groupings of dots and dashes, with no out-of-the-box solution for controlling the dash or dot spacing or size. It's fine for doing a simple dotted or dashed box, but not a line.

回答4:

write your code like this:

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

In case you don't like that, this is the ultimate answer (I wrote this with 'dashed' borderStyle in order to be seen more clearly.

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

回答5:

Thanks @Amir Gorji for this one. If you want only one side of a view's borders to be dashed, the bottom one for example, use this:

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

It's not perfect, but it's the best I could find.

P.S. react-native-dash does not work.