向文本添加实心笔划

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但这不适用于实心笔画。这个道具依赖于宽度和高度道具的偏移量。

例如，这是一种小吃 - 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

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

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

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

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

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

基本上，您保存文本的高度，然后将其用于其他视图的高度和边距。它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
    }
});

Answer 2

我找不到一种方法来使用 React Native 的 css 来做到这一点，但我找到了一种在文本中进行描边的方法react-native-svg

<Svg height="60" width="200">
  <Text
    fill="none"
    stroke="purple"
    fontSize="20"
    fontWeight="bold"
    x="100"
    y="20"
    textAnchor="middle"
  >
    STROKED TEXT
  </Text>
</Svg>

编辑

我知道这个答案不是完美的，但到目前为止这是我发现的唯一答案，但不幸的是它不适合动态文本。