React Native 之 Text的使用

前言

• 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

Text 组件介绍

---

• 在 React Native 用于显示文本的组件就是 Text，和iOS中的 UIlabel，Android中的 TextView类似，专门用来显示基本的文本信息，处理基本的显示布局外，还可以进行嵌套显示，设置样式，已经事件处理（如：点击事件）

Text 组件常用的属性和方法

---

• color：字体颜色

      // 字体颜色
      color:'blue'
  

  效果：

- numberOfLines：设置 Text 显示文本的行数，如果显示的内容超过行数，默认其余的文本信息不再显示

```
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle} numberOfLines={3}>雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest</Text>
            </View>
        );
    }

```
效果：
![设置行数](http://upload-images.jianshu.io/upload_images/1923109-3deedebeac82b746.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- fontSize：字体大小

```
    // 字体大小
    fontSize:30

```
效果：
![文字大小](http://upload-images.jianshu.io/upload_images/1923109-bfe2e50134fbfeee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- fontFamily：字体名称

```
    // 字体类型
    fontFamily:'Georgia'

```
效果：
![字体类型](http://upload-images.jianshu.io/upload_images/1923109-d628aa9aaa0b0e5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- fontStyle（’normal’, ‘italic’）：字体风格

```
    // 字体风格
    fontStyle:'italic'

```
效果：

- fontWeight（’normal’, ‘bold’, ‘100 ~ 900’）：指定字体的粗细。大多数字体都支持’normal’和’bold’值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值

```
    // 字体粗细
    fontWeight:('bold', '700')

```
效果：
![字体粗细](http://upload-images.jianshu.io/upload_images/1923109-aeb336766d1cd345.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- textShadowOffset（width: number, height: number）：设置阴影效果

• textShadowColor：阴影效果颜色

      // 阴影
      textShadowOffset:{width:3, height:5},
      // 阴影颜色
      textShadowColor:'black'
  

  效果：
  

• textShadowRadius：阴影效果圆角（值越大阴影越模糊）

      // 阴影圆角
      textShadowRadius:3