56_RN笔记13_RN中Text标签的属性和样式

1，Text标签概述

Text标签有很多属性：可以参考https://reactnative.cn/docs/text/

例如文本点击回调属性onPress，长按属性onLongPress等

2，Text标签嵌套文本

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class BoldAndBeautiful extends Component {
  render() {
    return (
      
        I am bold
        
          and red
        
      
    );
  }
}

3，Text标签嵌套视图

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

export default class BlueIsCool extends Component {
  render() {
    return (
      
        There is a blue square
        
        in between my text.
      
    );
  }
}

4，Text标签样式继承：推荐自定义文本控件

//自定义text控件
class MyAppHeaderText extends Component {
  render() {
    return (
      
        {this.props.children}
      
    );
  }
}

//使用

  这个组件包含了一个默认的字体样式，用于整个应用的文本
  这个组件包含了用于标题的样式

5，Text标签布局注意点

Text内部的元素不再使用flexbox布局，而是采用文本布局

必须把你的文本节点放在组件内。你不能直接在下放置一段文本

 

6，Text标签的Style样式

1. 完全继承自ViewStyle
2. TextStyle
3. TextStyleIOS
4. TextStyleAndroid

7，TextStyle有哪些？

    color?: string;
    fontFamily?: string;
    fontSize?: number;
    fontStyle?: "normal" | "italic";
    fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
    letterSpacing?: number;
    lineHeight?: number;
    textAlign?: "auto" | "left" | "right" | "center" | "justify";
    textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through";
    textDecorationStyle?: "solid" | "double" | "dotted" | "dashed";
    textDecorationColor?: string;
    textShadowColor?: string;
    textShadowOffset?: { width: number; height: number };
    textShadowRadius?: number;
    testID?: string;

8，TextStyleIOS有哪些？

    letterSpacing?: number;
    textDecorationColor?: string;
    textDecorationStyle?: "solid" | "double" | "dotted" | "dashed";
    textTransform?: "none" | "capitalize" | "uppercase" | "lowercase";
    writingDirection?: "auto" | "ltr" | "rtl";