Comment puis-je afficher une ligne pointillée dans React Native

Vous pouvez utiliser la bibliothèque ci-dessous qui vous aidera à réaliser votre conception en dotted .

react-native-dash

Un composant super simple pour React-Native pour dessiner des lignes pointillées personnalisables

Installation

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

Usage

npm i --save react-native-dash

Vous pouvez obtenir plus d'informations puis visiter le lien ci-dessus.

Je vous remercie

Ajoutez simplement borderRadius cela fonctionnera

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

TL; DR: Si vous avez besoin d'un contrôle quelconque, et non d'une solution de piratage, utilisez une solution tierce comme react-native-dash .

Il n'y a pas de moyen facile de créer une ligne pointillée dans React Native (au moins à partir de la version 0.59, mai 2019). Le problème en utilisant quelque chose comme un dotted ou en dashed borderStyle sur <View /> composant est qu'il appliquera à tous les 4 côtés de cette boîte de vue. Cela signifie que vous obtiendrez des regroupements très serrés de points et de tirets, sans solution prête à l'emploi pour contrôler l'espacement ou la taille des tirets ou des points. C'est bien pour faire une simple boîte en pointillé ou en pointillé, mais pas une ligne.

écrivez votre code comme ceci:

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

Au cas où vous n'aimeriez pas cela, c'est la réponse ultime (j'ai écrit ceci avec un borderStyle `` pointillé '' afin d'être vu plus clairement.

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

Merci @Amir Gorji pour celui-ci. Si vous voulez qu'un seul côté des bordures d'une vue soit en pointillé, celui du bas par exemple, utilisez ceci:

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

Ce n'est pas parfait, mais c'est le meilleur que j'ai pu trouver.

PS react-native-dash ne fonctionne pas.

Ma solution pour les lignes pointillées fonctionne pour le mode horizontal et portrait qui utilise «-» (symbole négatif).

Ajustez fontSize et letterSpacing pour obtenir le résultat souhaité car fontFamily pour cet exemple est OpenSans. Le résultat pourrait être différent.

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

Vous pouvez également essayer celui-ci, il vous donne une ligne pointillée parfaite.

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