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

【问题标题】：How to create text border in React Native?如何在 React Native 中创建文本边框？
【发布时间】：2015-12-31 16:39:09
【问题描述】：

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

我尝试过使用border 和shadow{Color, Radius, Opacity, Offset}，但还没有成功。有什么建议吗？

【问题讨论】：

facebook.github.io/react-native/docs/view-style-props

标签： css reactjs react-native

【解决方案1】：

目前不适用于 android。尝试将其包装在这样的视图中：

<View
  style={{
    borderWidth: 1,
    borderColor: "thistle",
    borderRadius: 50,
  }}>
</View>

【讨论】：

不适用于我的 Android！。参考：github.com/facebook/react-native/issues/29

【解决方案2】：

您可以将模拟器边框作为两个属性：

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

【讨论】：

为什么这个答案在这里评分这么差？这就是给定问题的确切答案！我认为问题是文本的边界......意味着字体......每一个字符。而上面的 textShadow... 样式表对此非常有效。
必须将偏移宽度和高度值减小到 1，也许半径也可以真正模拟文本边框
这不允许你创建文本边框（除非你想要一个非常细的边框）
因为 'textShadowRadius' 会产生模糊效果。

【解决方案3】：

我需要为Text 组件添加一个底部边框，如下所示：

我做了以下事情：

边框是<View/>，在另一个带有flexDirection : 'row'的边框内

这是我的代码：

<View style={styles.titleContainer}>
   <Text style={styles.title}>Horaire de prière</Text>
   <View style={styles.borderContainer}>
     <View style={styles.border} />
   </View>
</View>

风格：

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

  },

您可以使用 flex 修改边框大小。

【讨论】：

【解决方案4】：

 paddingTop: 10,
 borderWidth: 1,
 borderColor: 'red'

【讨论】：

【解决方案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>

【讨论】：

令我惊讶的是，实际上提供了一个解决方案的第一个答案是 OP 所要求的，但只有 4 个赞成票
非常聪明的解决方案，可以推荐这个。您也可以轻松地将这个示例转换为 OutlinedText 可重用组件！

【解决方案6】：

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

这是使用 Styles 和 ScrollView 的教程的组合

【讨论】：

ReactNative 的重大变化？震惊！不，我在开玩笑。但说真的，我是前一阵子写的，所以如果 RN 0.59 发生了变化，我并不感到惊讶。不幸的是，我不再对 RN 太活跃了。
LMK 如果您可以在 0.59 中修复此问题并随时编辑，或者让我知道如何编辑。

【解决方案7】：

你需要设置borderColor和borderWidth。

【讨论】：

【解决方案8】：

你至少需要设置borderWidth，它必须设置为一个整数。默认边框颜色为黑色，可以通过borderColor改变颜色

【讨论】：

【解决方案9】：

官方文档为您提供了这些信息。你可以在这个网站上找到它：Text Component。它显示了您可以使用哪些道具来更改组件的行为和样式。如您所见，有一些特定的文本样式，还有您可以在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

【讨论】：

它也不适用于 TextInput，尽管文档说了什么。
我在 Text 之外放了一个视图并将样式添加到视图中，效果很好。
这些东西都不会创建文本边框