CSS 如何在 React Native 中创建文本边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32924616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create text border in React Native?
提问by henkimon
In React-Native, how do I add font borders to Text-components?
在 React-Native 中，如何向文本组件添加字体边框？
I've tried using borderand shadow{Color, Radius, Opacity, Offset}, but haven't gotten that to work. Any suggestions?
我试过使用borderand shadow{Color, Radius, Opacity, Offset}，但没有让它起作用。有什么建议？
回答by webwelten
The official docs have this information for you. You can find it on this site: Text Component. There it shows which props you can use to change the behaviour and style of the component. As you can see there are some specific Text styles but also the styles you can apply on a View Component. And if you follow that link it shows you the border styles. So, what you're looking for is maybe:
官方文档为您提供了这些信息。您可以在此站点上找到它：Text Component。它显示了您可以使用哪些道具来更改组件的行为和样式。正如您所看到的，有一些特定的 Text 样式以及您可以应用于View Component的样式。如果您点击该链接，它会向您显示边框样式。所以，你要找的可能是：
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
回答by Tr?n H?ng ?i?p
you can emulator border as two attributes : textShadowColor color textShadowOffset {width: number, height: number}
您可以将模拟器边框作为两个属性： textShadowColor color textShadowOffset {width: number, height: number}
Ex:
前任：
textshadow:{
fontSize:100,
color:'#FFFFFF',
fontFamily:'Times New Roman',
paddingLeft:30,
paddingRight:30,
textShadowColor:'#585858',
textShadowOffset:{width: 5, height: 5},
textShadowRadius:10,
},回答by chinloong
Is currently not working for android. Try wrap it within a <View style={{borderWidth: 1}}/>
目前不适用于安卓。尝试将它包裹在一个<View style={{borderWidth: 1}}/>
回答by KChen
You need to set borderColorand borderWidth.
您需要设置borderColor和borderWidth。
回答by Scott Skiles
As noted by KChen, you need to add both borderColor and borderWidth. Just updating this answer for later versions of ReactNative (note the usage of 'styles.bigblue').
正如 KChen 所指出的，您需要添加 borderColor 和 borderWidth。只需为更高版本的 ReactNative 更新此答案（注意“ 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
}
});
This was using a combination of the tutorial from Stylesand ScrollView
这是结合了Styles和ScrollView的教程
回答by codebreaker
If you are looking for something similar to how CSS -webkit-text-stroke works, why not try react-native-svg?
如果您正在寻找类似于 CSS -webkit-text-stroke 工作方式的东西，为什么不试试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>
回答by Dustin Sanders
You need to at least set the borderWidth, it must be set to an integer. The default border color is black, you can change the color with borderColor
您至少需要设置borderWidth，它必须设置为整数。默认边框颜色为黑色，您可以使用 borderColor 更改颜色
回答by B. Mohammad
I needed to add a bottom border to Textcomponent like this:
我需要为组件添加一个底部边框，Text如下所示：
I did the following:
我做了以下事情：
the border is a <View/>inside another one with flexDirection : 'row'
边界是一个<View/>内部另一个flexDirection : 'row'
here is my code:
这是我的代码：
<View style={styles.titleContainer}>
<Text style={styles.title}>Horaire de prière</Text>
<View style={styles.borderContainer}>
<View style={styles.border} />
</View>
</View>
and the style:
和风格：
titleContainer: {
flex: 0.2,
alignItems:'center',
justifyContent:'center'
},
title: {
fontSize: 18,
marginBottom:2,
},
borderContainer:{
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
},
border:{
flex:0.28,
borderBottomWidth: 1,
borderBottomColor: '#428947',
},
you can modify border size with flex.
您可以使用 flex 修改边框大小。
回答by GURU PRASAD
paddingTop: 10,
borderWidth: 1,
borderColor: 'red'
