是否可以在 native react 中向字体添加轮廓或文本阴影以实现类似这样的效果(白色字体和黑色轮廓):
在网络上的 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 片段示例:CSS Font Border?
最佳答案
至少有一种方法可以让它在 ios 和 android 上看起来像这样:
想法:
想法是在文本对象上使用多个阴影。我们可以通过用 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
值。使用更高的值,阴影的边缘将是可见的。如果您确实需要更宽的笔触,可以通过添加更多图层来覆盖不同的阴影方向来解决此问题。
关于css - React Native 字体轮廓/textShadow,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38755258/