如何在React Native中创建文本边框？

Question

在React-Native中,如何向Text-components添加字体边框？

我已经尝试使用border和shadow{Color, Radius, Opacity, Offset},但还没有得到那工作.有什么建议？

Answer 1

官方文档为您提供此信息.您可以在此站点上找到它:Text 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

Answer 2

你需要设置borderColor和borderWidth.

Answer 3

目前不适用于Android.尝试将其包装在一个<View style={{borderWidth: 1}}/>

Answer 4

您可以将边框作为两个属性进行仿真：textShadowColor color textShadowOffset {width：number，height：number}

例如：

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

Answer 5

如果您正在寻找类似于 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>