React Native-Text

708 阅读2分钟

Text.png

注意:语法xxx:xxx为style样式,xxx=xxx为组件上属性

字体属性

fontSize

含义:字体大小

语法:fontSize:30

fontFamily

含义:设置字体样式,一般不会设置中文字体格式,可能会引入第三方的数字字体,需要将字体文件放入到Android或ios目录下静态资源对应位置/fonts下

语法:fontFamily:'JetBrains Mono'

fontWeight

含义:字重

语法:fontWight:'bold'可选bold、normal、100-900,安卓只有normalbold足够使用

行数及修饰模式

numberOfLines

含义:文字几行显示

语法:numberOfLines={1},直接在Text组件上写,默认超过多少行末尾...

ellipsizeMode

含义:...的位置

语法:ellipsizeMode='clip'可选属性:clip、head、middle、tail——裁剪直接没有省略就显示那么多行(容易造成误解,就这么多吗)、头部...,中间...,末尾...

是否可选中及选中颜色

selectable

含义:是否可选中,默认不可选中(选中就能进行复制等操作)

语法:selectable={true}

selectionColor

含义:选中时的背景颜色

语法:selectionColor='#c0c0c0'

点击和长按

onPress

含义:点击事件

语法:onPress={()=>{console.log('onPress'}}

onLongPress

含义:长按事件,长按并不会触发点击事件,只会触发长按事件

语法:onLongPress={()=>{console.log('onLongPress')}}

跟随系统字号

allowFontScaling

含义:是否跟随系统字号,默认true,应用绝大多数都会跟随

语法:allowFontScaling={true}

文本对其(在嵌套内部Text设置无效)

textAlign

含义:水平对其方式

语法:textAlign:'center'可选属性:auto、center、justify、left、right

textAlignVertical

含义:垂直对齐方式

语法:textAlign:'center'可选属性:auto、bottom、center、top

文本装饰

textDecorationStyle

含义:虚线、点线、直线(需要搭配textDecorationLine使用) 安卓中只有solidnone 有效果

语法:textDecorationStyle:'solid'可选属性:dashed、dotted、double、solid

textDecorationLine

含义:什么线,删除线、下划线?

含义:textDecorationLine:'underline'可选属性:line-through、none、underline、underline line-through

文字阴影

textShadowColor、textShadowOffset、textShadowRadius

语法:

{
    textShadowColor: '#a0a0a0',
    textShadowOffset: {width: 2, height: 4},
    textShadowRadius: 2,
}

image.png