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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值