React原生:text阴影在侧面渲染不佳

pgx2nnw8  于 2023-01-18  发布在  React
关注(0)|答案(3)|浏览(138)

我在使用textShadow propriety时遇到了一些问题。下面是我的代码:

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

class Test extends React.Component {
  
  render() {
    return (
      <View style={styles.main_container}>
         <Text style={}>Some textooo</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    justifyContent:'center',
    alignItems:'center',
  },
  text: {
    fontSize: 30, 
    fontWeight: '900', 
    textShadowColor: 'rgba(0, 0, 0, 0.8)', 
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 10,
}

 
})

export default Test

以下是它的渲染方式:
Text with shadow
正如你所注意到的,阴影在文本的开头和结尾都被剪掉了...

有人知道如何避免这种情况吗?(在要呈现的字符串中不添加““)

非常感谢您的帮助。

0yycz8jy

0yycz8jy1#

这是一个代码的工作示例https://snack.expo.io/@jsfit/text-shadow在我看来不错

brqmpdu1

brqmpdu12#

在结尾处添加空白似乎可以解决我的问题。

mzsu5hc0

mzsu5hc03#

指定文本组件的宽度和高度,然后对齐文本

textAlign: 'center',
textAlignVertical: 'center'
text: {
    fontSize: 30, 
    fontWeight: '900', 
    textShadowColor: 'rgba(0, 0, 0, 0.8)', 
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 10,

    //add this styles
    width:100,
    height: 100,
    textAlign: 'center',
    textAlignVertical: 'center'
}

相关问题