Question

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

我已尝试使用border和shadow{Color, Radius, Opacity, Offset}，但尚无法使用。有什么建议吗？

Answer 1

官方文档为您提供此信息。您可以在此网站上找到它：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

Answer 2

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

中

Answer 3

您需要设置borderColor和borderWidth。

Answer 4

你可以模拟边框作为两个属性： textShadowColor颜色 textShadowOffset {width：number，height：number}

例如：

＆＃13;

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

＆＃13;

Answer 5

如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

的教程的组合

Answer 6

您至少需要设置borderWidth，它必须设置为整数。默认边框颜色为黑色，您可以使用borderColor

更改颜色

Answer 7

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

Answer 8

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

Answer 9

我需要像这样向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修改边框大小。

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

9 个答案: