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】:至少有一种方法可以让它在 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
值。使用较高的值,阴影的边缘将可见。如果您确实需要更宽的描边,可以通过添加更多图层来覆盖不同的阴影方向来解决此问题。
【讨论】:
谢谢!!!这是我发现这样做的唯一方法!它不是 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在Android / iOS上使用不同的lineHeight