React Native 字体轮廓 / textShadow

Posted

技术标签:

【中文标题】React Native 字体轮廓 / textShadow【英文标题】:React Native font outline / textShadow 【发布时间】:2016-12-09 20:43:44 【问题描述】:

是否可以在 react native 中为字体添加轮廓或 textShadow 以实现类似的效果(白色字体带有黑色轮廓):

在 Web 上的 CSS 中,可以为字体添加文本阴影或轮廓,为文本提供跟随字体的边框,如下所示:

h1 
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
<h1>Hello World</h1>

是否可以在 react native 中做类似的事情?

我从这篇关于如何使用 CSS 的堆栈溢出帖子中获取了 CCS sn-p 示例:CSS Font Border?

编辑:更新问题以尝试使其更清晰

【问题讨论】:

我觉得这篇文章很有帮助:***.com/questions/32924616/…有参考github.com/react-native-community/react-native-svg#text 【参考方案1】:

另一个想法,以防对某人有用,也许您可​​以使用以下轮廓字体之一:https://www.1001freefonts.com/outline-fonts-2.php

【讨论】:

【参考方案2】:

至少有一种方法可以让它在 iosandroid 上看起来像这样:

想法:

这个想法是在 Text 对象上使用多个阴影。我们可以通过用 View 包裹 Text 组件并使用不同的阴影多次克隆相同的 Text 对象来使它们使用不同的方向来实现。

实施:

这是包装器组件的代码:

import * as React from "react";
import  StyleSheet, View  from "react-native";
import  Children, cloneElement, isValidElement  from "react";

type Props = 
  children: any,
  color: string,
  stroke: number

const styles = StyleSheet.create(
  outline: 
    position: 'absolute'
  ,
);

export class TextStroke extends React.Component<Props> 
  createClones = (w: number, h: number, color?: string) => 
    const  children  = this.props;
    return Children.map(children, child => 
      if (isValidElement(child)) 
        const currentProps = child.props as any;
        const currentStyle = currentProps ? (currentProps.style || ) : ;

        const newProps = 
          ...currentProps,
          style: 
            ...currentStyle,
            textShadowOffset: 
              width: w,
              height: h
            ,
            textShadowColor: color,
            textShadowRadius: 1
          
        
        return cloneElement(child, newProps)
      
      return child;
    );
  

  render() 
    const color, stroke, children = this.props;
    const strokeW = stroke;
    const top = this.createClones(0, -strokeW * 1.2, color);
    const topLeft = this.createClones(-strokeW, -strokeW, color);
    const topRight = this.createClones(strokeW, -strokeW, color);
    const right = this.createClones(strokeW, 0, color);
    const bottom = this.createClones(0, strokeW, color);
    const bottomLeft = this.createClones(-strokeW, strokeW, color);
    const bottomRight = this.createClones(strokeW, strokeW, color);
    const left = this.createClones(-strokeW * 1.2, 0, color);

    return (
      <View>
        <View style= styles.outline > left </View>
        <View style= styles.outline > right </View>
        <View style= styles.outline > bottom </View>
        <View style= styles.outline > top </View>
        <View style= styles.outline > topLeft </View>
        <View style= styles.outline > topRight </View>
        <View style= styles.outline > bottomLeft </View>
         bottomRight 
      </View>
    );
  

如果文字不大,也可以只用4个方向而不是8个方向来提高性能:

<View>
    <View style= styles.outline > topLeft </View>
    <View style= styles.outline > topRight </View>
    <View style= styles.outline > bottomLeft </View>
     bottomRight 
</View>

用法:

<TextStroke stroke= 2  color= '#000000' >
  <Text style= 
    fontSize: 100,
    color: '#FFFFFF'
   > Sample </Text>
</TextStroke>

您还可以在内部使用多个 Text 对象,因为包装器会复制所有对象。

性能:

我尚未检查此解决方案的性能。由于我们多次复制文本,它可能不是很好。

问题:

需要小心stroke 值。使用较高的值,阴影的边缘将可见。如果您确实需要更宽的描边,可以通过添加更多图层来覆盖不同的阴影方向来解决此问题。

【讨论】:

谢谢!!!这是我发现这样做的唯一方法!它不是 100% 完美的,但它是迄今为止最好的解决方案!你让我开心@lub0v! 使用text-align: center时,笔画不匹配。你知道你会怎么做吗?【参考方案3】:

是的,可以通过以下属性实现:

textShadowColor color
textShadowOffset ReactPropTypes.shape( width: ReactPropTypes.number, height: ReactPropTypes.number )
textShadowRadius ReactPropTypes.number

https://facebook.github.io/react-native/docs/text.html

实际完成的拉取请求: https://github.com/facebook/react-native/pull/4975

【讨论】:

感谢您的回答。我不确定我的问题是否清楚,但我不想在文本周围放置方形/矩形边框。相反,我正在尝试创建一个跟随字体本身轮廓的阴影效果,这样我就可以拥有例如带有黑色轮廓的白色字体 React Native 的 textShadow* 样式实现了你想要的一半。问题是边框只在一个方向上呈现,而不是在整个文本周围。 有人找到解决方案了吗?我这样做是为了让我的文字看起来就像问题中的图片,并且在阴影处遇到了同样的问题,它只适用于方向,它也呈现在文本后面,我们正在尝试勾勒文本 @bzlight 如果它仍然是您正在寻找的东西,请检查我的答案

以上是关于React Native 字体轮廓 / textShadow的主要内容,如果未能解决你的问题,请参考以下文章

React Native 响应式字体大小

React Native Maps 红色轮廓 ios

嵌套文本,垂直对齐不起作用 - React Native

使用React Native在Android / iOS上使用不同的lineHeight

react-native字体react-native-vector-icons在ios下的使用

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