向文本添加实线

Question

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

我尝试通过样式组件直接应用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 ，它可能会崩溃。您可以使用 onLayout 来破解它，就像在这个 Snack 中一样：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>

编辑

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

Answer 3

如果您想在 React Native 中创建轮廓文本，请查看我开发的react-native-lines-text 包。简单又高效。

https://github.com/charmy/react-native-lines-text

欢迎反馈！”