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

时间:2015-10-03 16:04:27

标签: css reactjs react-native

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

我已尝试使用bordershadow{Color, Radius, Opacity, Offset},但尚无法使用。有什么建议吗?

9 个答案:

答案 0 :(得分:22)

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

答案 1 :(得分:11)

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

答案 2 :(得分:8)

您需要设置borderColorborderWidth

答案 3 :(得分:5)

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

例如:

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

答案 4 :(得分:4)

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

enter image description here

这是使用StylesScrollView

的教程的组合

答案 5 :(得分:1)

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

更改颜色

答案 6 :(得分:0)

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

答案 7 :(得分:0)

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

答案 8 :(得分:0)

我需要像这样向Text组件添加底部边框:

enter image description here

我做了以下事情:

边界是<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修改边框大小。