1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > react 加粗_React Native - Text组件使用详解(样式 属性 方法)

react 加粗_React Native - Text组件使用详解(样式 属性 方法)

时间:2018-09-10 14:53:56

相关推荐

react 加粗_React Native - Text组件使用详解(样式 属性 方法)

Text一个用于显示文本的 React组件,并且它也支持嵌套、样式,以及触摸处理。

1,简单的样例

(1)效果图

下面给 Text设置了字体大小、颜色、阴影,并加粗。

(2)样例代码

import React, { Component } from eact;

import {

AppRegistry,

StyleSheet,

Text,

View,

} from eact-native;

class Main extends Component {

render() {

return (

编程社区

);

}

}

const styles = StyleSheet.create({

flex:{

flex:1

},

container: {

marginTop:35,

marginLeft:5,

marginRight:5,

},

font:{

color:#FF7700,

fontSize:40,

fontWeight:old,

textShadowColor:#C0C0C0,

textShadowRadius:2,

textShadowOffset:{width:2,height:2},

},

});

AppRegistry.registerComponent(HelloWorld, () => Main);

2,Text支持的样式

Text组件除了可以使用 View组件所有的 Style,还支持如下样式:

名称

作用

适用设备

color

字体颜色

多种形式

通用

fontFamily

字体名称

fontFamily 用来指定 Text 组件以何种字体族显示。它的取值有:

serif:该字体族在字的笔画开始及结束的地方有额外的装饰,而笔画的粗细会因横直地不同而有所不同。

sans-serif:该字体族没有额外的装饰,笔画粗细大致差不多。

monospace:由于打字机的出现,又独立出了这种等宽字体种类。

以及延伸出来的:sans-serif-light、sans-serif-thin、sans-serif-condensed、sans-serif-medium

通用

fontSize

字体大小

数字

通用

fontStyle

字体风格

normal、italic

通用

fontWeight

字体粗细权重

normal、bold、100、200、300、400、500、600、700、800、900

normal和bold适用于大多数字体,分别表示正常字体和粗体。

其后的9个数字序列代表从最细(100)到最粗(900)的字体粗细程度,每一个数字定义的粗细都要比上一个等级稍微粗一些。但不是所有的字体的值都能用数字值,在这种情况下,最接近的值被选择。

通用

lineHeight

行高

数字

通用

textAlign

文本对齐方法

auto、left、right、center、justify。

auto表示根据组件显示的字符语言来决定字符串如何排列,比如英语将自动从左向右

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。