ReactNative: 使用Text文本组件

一、简言

初学RN,一切皆新。Text组件主要用于显示文本,Text组件的重要性不言而喻,无论是Web开发还是客户端开发,都离不开它。它具有响应特性,也即表现为当它被触摸时是否显示为高亮状态。在Web开发中,字体样式的继承十分重要,在body上设置字体可以作用到全部的文本标签,而RN中字体样式只有在Text组件上才起作用。它支持多层嵌套,由此它存在样式继承,内部的Text组件可以继承外部Text组件的样式,也即父组件定义了相关样式,如果子组件没有重写样式的话,那么该子组件也会继承父组件定义的样式。Text组件的布局方式和View组件的布局方式不同,View组件采用FlexBox伸缩盒子布局,而Text组件则采用的是文本布局,一个接一个Text组件横向排列,如果文本到达末尾,可以换行显示。总体来说,它的主要作用概括是显示基本的文本信息,除了基本的显示布局之外,也可以进行嵌套布局,设置样式,以及做事件处理。

二、特性

onPress:该属性的值是一个函数,表示按下事件或者叫手指触摸事件。当手指按下时被触发。

numberOfLines:该属性的值是一个数字,表示显示行数,如果超过该数值,则使用省略号{...}显示。

allowFontScalling:该属性的值是一个函数,控制字体是否根据iOS的设置进行自动缩放。

onLayout:该属性的值是一个函数,用于获取该元素布局的位置和大小。例如{"target":7,"layout":{"x":10,"y":10,"width":100,"height":100}}。一般函数的事件形式为:

//打印事件参数
function(e){ console.log(e.nativeEvent) };

三、样式

除了继承了View组件的所有Style外,本身还具有如下样式属性:

color:字体颜色
fontFamily:字体名称
fontStlye:字体风格(normal,italic)
fontWeight:字体粗细(‘normal‘,‘bold‘,‘100‘,‘200‘)
fontSize:字体大小
textShadowOffset:设置阴影效果{width:number,height:number}
textShaowRadius:阴影效果圆角
textShadowColr:阴影效果的颜色
letterSpacing:字符间距
lineHeight:行高
textAlign:文本对齐方式(‘auto‘,‘left‘,‘right‘,‘‘)
textDecorationLine:横线位置(‘none‘,‘underline‘,‘line-through‘,‘underline line-through‘)
textDecorationStyle:线的风格(‘solid‘,‘‘)
textDecorationColor:线的颜色
writingDirection:文本方向(‘auto‘,‘ltr‘,‘rtl‘)

四、示例

注意:下面代码中引入了PixelRatio API,PixelRatio的get方法用于获取高清设备的像素比。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ‘react‘;
import {
  AppRegistry,
  StyleSheet,
  View,
  PixelRatio,
  Text
} from ‘react-native‘;

export default class ReactNativeDemo extends Component {

  constructor(){
    super()
    this.print = this.print.bind(this)//事件绑定
  }

  print(e){
    console.log(e.nativeEvent) //打印事件参数
  }

  render() {
    return (
        <View style={styles.container}>
          <View style={styles.flex}>
            <Text style={styles.title}>
              <Text style={styles.title1} onPress={this.print}>網易</Text>
              <Text style={styles.title2}>新闻</Text>
              <Text style={styles.pk}> pk </Text>
              <Text style={styles.title1}>紟日</Text>
              <Text style={styles.title2}>头条</Text>
            </Text>
          </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: 75,
    backgroundColor: ‘#EEE‘,
  },
  flex: {
    marginTop: 25,
    height: 50,
    borderBottomWidth: 2/PixelRatio.get(), //获取最小宽度
    borderBottomColor: ‘#EF2D36‘,
    alignItems: ‘center‘
  },
  title: {
    fontSize: 25,
    fontWeight: ‘bold‘,
    textAlign: ‘center‘
  },
  pk: {
    color: ‘green‘
  },
  title1 :{
    color: ‘#CD1D1C‘
  },
  title2: {
    color: ‘#FFFFFF‘,
    backgroundColor: ‘#CD1D1C‘
  }
});

AppRegistry.registerComponent(‘ReactNativeDemo‘, () => ReactNativeDemo);

五、打印

2019-12-07 22:28:46.298 [info][tid:com.facebook.react.JavaScript] { target: 7,
  pageY: 42.5,
  locationX: 17,
  force: 0,
  locationY: 17.5,
  identifier: 1,
  pageX: 83.5,
  timestamp: 143715461.59643,
  changedTouches: [ [Circular] ],
  touches: [] }

原文地址:https://www.cnblogs.com/XYQ-208910/p/12003658.html

时间: 2024-10-13 22:14:12

ReactNative: 使用Text文本组件的相关文章

微信小程序组件解读和分析:五、text文本

text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <view > <text>我是文本组件</text> </view> <text>{{text}}</text> 下面是JS代码: [JavaScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 1

【Flutter学习】基本组件之文本组件Text

一,概述 文本组件(Text)负责显示文本和定义显示样式, 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text 三,构造方法 单一格式(Text( )) 构造方法创建,只能生成一种style Text() const Text(this.data, { Key key, this.style, this.textAlign, this.textDirecti

06 Text文本

学习笔记,如有错误请指正.?号处也请各位指点下,谢谢. Text文本是用于显示一段文字的组件 Text:文本内容 Font:所用的字体库,一般为ttf格式 Font Style:字体风格,有Normal(普通).Bold(黑体).Italic(斜体).Bold And Italic(斜黑体) Font Size:字号,字体尺寸 Line Spacing:行距 Rich Text:是否使用富态字 Alignment:文本对齐方式 Horizontal Overflow:水平溢出,Overflow文

&lt;input type=&quot;text&quot;&gt;文本输人框

type类型: text  文本框 password  口令密码输人框 reset  重置或清除 buttou  命令按钮 checkbox  复选框 radio  单选框 submit  提交 file文件 hidden  隐藏字段 image  图像 color  颜色 email   邮件 date  日期 number  数字 disabled=“disabled”输入控件不可用 readonly=“readonly”只读不能修改

iOS富文本组件的实现—DTCoreText源码解析 数据篇

本文转载 http://blog.cnbang.net/tech/2630/ DTCoreText是个开源的iOS富文本组件,它可以解析HTML与CSS最终用CoreText绘制出来,通常用于在一些需要显示富文本的场景下代替低性能的UIWebView,来看看它是怎样解析和渲染HTML+CSS的,总体上分成两步: 数据解析—把HTML+CSS转换成NSAttributeString 渲染—用CoreText把NSAttributeString内容渲染出来,再加上图片等元素 本篇先介绍第一步,数据解

html5与js关于input[type=&#39;text&#39;]文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick=&quot;select();&quot;。做购物车页面时会要用到。

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();".做购物车页面时会要用到. input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange: 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次

placeholder 解决UITextField中placeholder和text文本同时显示的问题

TextField都使用了placeholder属性,但在代码中又设置了text属性,因此ViewController会同时显示placeholder文本和text文本. 这个问题让我彻底崩溃.按道理说当text中的文本长度为0时placeholder文本显示,text文本长度不为0时placeholder应该隐藏才对? 而且正常情况下我也没有遇到过这个问题.后来我新建项目,进行多次尝试都不能复现这个问题. 虽然问题导致的原因至今没有找到.但google工作成果也不是一点没有.Stackover

鼠标所到之处 显示Text文本

//使用List需添加的命名空间using System.Collections.Generic; //声明元素类型为int类型的List容器 //ToolPic用于盛放图片 public List<GameObject> ToolPic2 = new List<GameObject>(); //ToolPicName用于盛放要显示的Text文本 public List<GameObject> ToolPicName = new List<GameObject&g

HTML:&lt;input type=&quot;text&quot;&gt;文本框不可编辑的方式

1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本框内容“姓名”呈灰色显示. 2.<input type="text" name="name" value="姓名" readonly="readonly" /> 文本框正常显示,只是无法获得光标,不能编辑. 3.<