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 (
      <Text style={{fontWeight: 'bold'}}>
        I am bold
        <Text style={{color: 'red'}}>
          and red
        </Text>
      </Text>
    );
  }
}

3，Text标签嵌套视图

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

export default class BlueIsCool extends Component {
  render() {
    return (
      <Text>
        There is a blue square
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        in between my text.
      </Text>
    );
  }
}

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

//自定义text控件
class MyAppHeaderText extends Component {
  render() {
    return (
      <MyAppText>
        <Text style={{ fontSize: 20 }}>{this.props.children}</Text>
      </MyAppText>
    );
  }
}

//使用
<View>
  <MyAppText>这个组件包含了一个默认的字体样式，用于整个应用的文本</MyAppText>
  <MyAppHeaderText>这个组件包含了用于标题的样式</MyAppHeaderText>
</View>

5，Text标签布局注意点

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

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

 

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";