Css 反应本机字体轮廓/文本阴影

是否可以在react native中将大纲或文本阴影添加到字体中以实现如下效果（白色字体加黑色大纲）：

在web上的CSS中，可以向字体添加文本阴影或轮廓，为文本提供紧跟字体的边框，如下所示：

h1{
颜色：黄色；
文本阴影：-1px 0黑色，0 1px黑色，1px 0黑色，0-1px黑色；
}

---

Hello World

是，可以通过以下属性：

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

实际完成的拉取请求：

---

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

创意：

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

其思想是在文本对象上使用多个阴影。我们可以用视图包装文本组件，并用不同的阴影多次克隆相同的文本对象，使它们使用不同的方向

实施：

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

以下是包装器组件的代码：

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

import*as React from“React”；
从“react native”导入{StyleSheet，View}；
从“react”导入{Children，cloneElement，isValidElement}；
类型道具={
儿童：任何，
颜色：字符串，
笔画：数字
}
const styles=StyleSheet.create({
大纲：{
位置：'绝对'
},
});
导出类TextStroke扩展了React.Component{
createClones=（w:number，h:number，color？：string）=>{
const{children}=this.props；
返回Children.map（Children，child=>{
if（有效删除（子项））{
const currentProps=child.props，如有；
const currentStyle=currentProps？（currentProps.style | |{}）：{}；
常数newProps={
…当前道具，
风格：{
…当前样式，
文本阴影偏移：{
宽度：w，
身高：h
},
textShadowColor:color，
文本阴影半径：1
}
}
返回cloneElement（子项、新道具）
}
返回儿童；
});
}
render（）{
const{color，stroke，children}=this.props；
const strokeW=冲程；
const top=this.createClones（0，-strokeW*1.2，颜色）；
const topLeft=this.createClones（-strokeW，-strokeW，color）；
const topRight=this.createClones（strokeW，-strokeW，color）；
const right=this.createClones（strokeW，0，颜色）；
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，颜色）；
返回(
{左}
{对}
{bottom}
{top}
{左上角}
{topRight}
{左下角}
{右下角}
);
}
}

如果文本不大，也可以仅使用4个方向而不是8个方向来提高性能：

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

{左上角}
{topRight}
{左下角}
{右下角}

用法：

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

样品

您还可以在内部使用多个文本对象，因为包装器会复制所有文本对象

性能：

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

我尚未检查此解决方案的性能。因为我们复制了很多次文本，所以可能不太好

问题：

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

需要小心使用

行程

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

---

谢谢你的回答。我不确定我的问题是否清楚，但我不希望在文本周围加上方形/矩形边框。相反，我正在尝试创建一个阴影效果，该效果遵循字体本身的轮廓，因此我可以使用一个白色字体和一个黑色outlineReact Native的textShadow*样式来实现您想要的效果。问题是边框只在一个方向上呈现，而不是在文本周围。有人找到了解决方法吗？我正在做的是使我的文本看起来像问题中的图片，我遇到了同样的问题，阴影只在方向上起作用，它也在文本后面呈现，我们试图勾勒出text@bzlight检查我的答案，如果它仍然是你在寻找的东西，我发现这篇文章非常有用：有参考谢谢这是我找到的唯一方法！它不是完美的100%，但是迄今为止最好的解决方案！你成就了我的一天@lub0v！使用“文本对齐：居中”时，笔划不匹配。你知道你会怎么做吗？