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?
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
Ne fonctionne pas actuellement pour Android. Essayez de l'envelopper dans un <View style={{borderWidth: 1}}/>
Vous devez définir borderColor
et borderWidth
.
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,
},
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
}
});
Ceci utilisait une combinaison du tutoriel de Styles et ScrollView
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
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>