React Native 字体轮廓 / textShadow

Question

是否可以在 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>

是否可以在本机反应中做类似的事情？

我从这个堆栈溢出帖子中获取了 CCS 片段示例，关于如何使用 CSS： CSS 字体边框？

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

原文由 Brien Crean 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，可以通过以下属性：

 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

原文由 Shivam Sinha 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

至少有一种方法可以让它在 ios 和 android 上看起来像这样：

主意：

这个想法是在 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 值。使用较高的值，阴影的边缘将可见。如果你真的需要更宽的描边，你可以通过添加更多层来覆盖不同的阴影方向来解决这个问题。

原文由 lub0v 发布，翻译遵循 CC BY-SA 4.0 许可协议