web-dev-qa-db-fra.com

Comment créer une bordure de texte dans React Native?

Dans React-Native, comment puis-je ajouter des bordures de police aux composants Text?

J'ai essayé d'utiliser border et shadow{Color, Radius, Opacity, Offset}, mais cela n'a pas fonctionné. Aucune suggestion?

cssreactjsreact-native
19
henkimon

Les documents officiels ont cette information pour vous. Vous pouvez le trouver sur ce site: Composant texte . Il indique les accessoires que vous pouvez utiliser pour modifier le comportement et le style du composant. Comme vous pouvez le constater, il existe des styles de texte spécifiques, mais également ceux que vous pouvez appliquer sur un composant View Component . Et si vous suivez ce lien, il vous montrera les styles de bordure. Donc, ce que vous cherchez, c'est peut-être:

borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum('solid', 'dotted', 'dashed')
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
22
webwelten

Ne fonctionne pas actuellement pour Android. Essayez de l'envelopper dans un <View style={{borderWidth: 1}}/>

11
chinloong

Vous devez définir borderColor et borderWidth.

6
KChen

vous pouvez émuler la bordure sous forme de deux attributs:

Ex:

textshadow:{
    fontSize:100,
    color:'#FFFFFF',
    fontFamily:'Times New Roman',
    paddingLeft:30,
    paddingRight:30,
    textShadowColor:'#585858',
    textShadowOffset:{width: 5, height: 5},
    textShadowRadius:10,
  },

4
Trần Hồng Điệp

Comme l'a noté KChen, vous devez ajouter à la fois borderColor et borderWidth. Il suffit de mettre à jour cette réponse pour les versions ultérieures de ReactNative (notez l'utilisation de 'styles.bigblue'). 

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, ScrollView, Image, Text } from 'react-native';

export default class HelloWorldWithBorder extends Component {
        render() {
                return (
                                <ScrollView>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                </ScrollView>
                       );
        }
}


const styles = StyleSheet.create({
        bigblue: {
                color: 'blue',
                fontWeight: 'bold',
                fontSize: 20,
                borderColor: 'black',
                borderWidth: 1
        }
});

 enter image description here

Ceci utilisait une combinaison du tutoriel de Styles et ScrollView

4
Scott Skiles

Vous devez au moins définir borderWidth, il doit être défini sur un entier. La couleur de bordure par défaut est le noir, vous pouvez changer la couleur avec borderColor

1
Dustin Sanders

Si vous cherchez quelque chose de similaire à la façon dont CSS -webkit-text-stroke fonctionne, pourquoi ne pas essayer react-native-svg ?

import Svg, { Text } from "react-native-svg";

<Svg height="50%" width="50%" viewBox="0 0 100 100">
  <Text
    stroke="black"
    strokeWidth="1"
    fill="white"
    color="#ffffff"
    fontSize="45"
  >
    Yay!
  </Text>
</Svg>
0
codebreaker