react-native - 向文本添加实心笔划

Question

我正在尝试为 React Native 中的某些文本添加粗实线笔触。我添加了一个带有所需 CSS 的片段。

我已经尝试通过 styled-components 直接应用 CSS，但我收到一个错误，指出我的值无法解析。

const Title = styled.Text`
  text-shadow: 2px 2px 0px  #000, -2px -2px 0px  #000, 2px -2px 0px  #000, -2px 2px 0px  #000;
`;

我试过使用 textShadow但这不适用于实心笔画。这个 Prop 依赖于宽度和高度 Prop 的偏移量。

例如，这是一种小吃 - https://snack.expo.io/@hannigan/ba7574

h1 {
  text-shadow: 2px 2px 0px  #000, -2px -2px 0px  #000, 2px -2px 0px  #000, -2px 2px 0px  #000;
  color: white;
  font-family: 'Arial';
}

<h1>Hello World</h1>

Answer 1

所以这对我有用，你确定它在动态高度对你不起作用吗？

编辑:我现在可能已经找到了你在说什么。我正在检查是否可以更新小吃以适用于动态 View 。

Edit2:好的，让它工作。您只需要使第一个文本非绝对。

https://snack.expo.io/Bk8ifP!4I

Edit3:正如 Vencovsky 所提到的，如果您需要在它周围使用 flex，它可能会损坏。你可以用这个 Snack 中的 onLayout 来破解它:https://snack.expo.io/HJ!PRUKNL

基本上，您保存文本的高度，然后将其用于其他 View 的高度和边距。它hacky，但我在其他设置中使用过它并且工作正常。

export default class App extends React.Component {

  render() {

       const myText = 'Hello World. This is my very long text, that can be a few lines height'

    return (
      <View style={styles.container}>

      <View>

        <Text style={[styles.paragraph]}>{myText}</Text>
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: -2, height: -2}}]}>{myText}</Text> 
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: -2, height: 2}}]}>{myText}</Text>
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: 2, height: -2}}]}>{myText}</Text> 

      </View>

       <Text> 'Here another text' </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8
  },
  paragraph: { fontSize: 50, color: '#FFF', textShadowColor: 'black', textShadowRadius: 1, textShadowOffset: { 
          width: 2,
          height: 2
        }}, 
  abs: {
     position: 'absolute',
      top: 0, left: 0, right: 0, bottom: 0
    }
});