一、简言

初学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方法用于获取高清设备的像素比。

NavHead.js:

//采用React.createClass创建组件
const React = require('react');
const ReactNative = require('react-native')
const {
StyleSheet,
View,
Text,
PixelRatio
} = ReactNative; const NavHead = React.createClass({ //打印事件参数
print(e){
console.log(e.nativeEvent)
}, render(){
return (
<View style={styles.parent}>
<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({
parent:{
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'
}
}); module.exports = NavHead;

index.ios.js:

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import NavHead from './src/NavHead'
import List from './src/List' import {
AppRegistry,
StyleSheet,
View
} from 'react-native'; export default class ReactNativeDemo extends Component { render() {
return (
<View style={styles.container}>
<NavHead/>
<List/>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white'
}
}); AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

五、打印

-- ::46.298 [info][tid:com.facebook.react.JavaScript] { target: ,
pageY: 42.5,
locationX: ,
force: ,
locationY: 17.5,
identifier: ,
pageX: 83.5,
timestamp: 143715461.59643,
changedTouches: [ [Circular] ],
touches: [] }

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

  1. rich-text 副文本组件 text文本组件

    rich-text 副文本组件 要知道我们小程序常用的标签是view 但是我们想使用div   span  h1 i 标签等等,这种带特性的标签,怎么办的,我们就可以使用我们的 rich-text组件 ...

  2. Flutter Container容器组件、Text文本组件详解

    import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...

  3. 【text】 文本组件说明

    text文本组件:在小程序里除了文本节点以外的其他节点都无法长按选中. 原型: <text selectable="[Boolean]" space="[ensp ...

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

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

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

    一,概述 文本组件(Text)负责显示文本和定义显示样式, 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget ...

  6. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  7. React-Native之轮播组件looped-carousel的介绍与使用

    React-Native之轮播组件looped-carousel的介绍与使用 一,关于react-native轮播组件的介绍与对比 1,react-native-swiper在动态使用网页图片,多张图 ...

  8. React-Native基础_4.View组件

    View组件 对应ios 的UIView android 中的view 使用要先导入View import { View } from 'react-native'; 使用就是View标签,可以添加S ...

  9. 【Unity笔记】UGUI的Text文本框的大小随着文本字数变化

    需求:UGUI的Text文本框的内容会随着文本字数多少/换行而自动改变大小. 给Text加一个Content Size Filter组件(脚本),设置Horizontal Fit和Vertical F ...

随机推荐

  1. windows系统下压缩文件成tar.gz格式的方法

    tar.gz 是linux和unix下面比较常用的格式,几个命令就可以把文件压缩打包成tar.gz格式,然而这种格式在windows并不多见,WinRAR.WinZip等主流压缩工具可以释放解开,却不 ...

  2. 初识orm

    初识orm 一.什么是orm 介绍 ORM: 对象关系映射 将随对象映射成 数据表中的鱼跳跳记录 类--->表名 对象--->记录 对象.属性--->字段 # 演示映射关系 ''' ...

  3. nginx配置文件 http 强跳转 https

    路径 /usr/local/nginx/conf/conf.d/test.jackcui.com.conf server { listen 80; server_name test.jackcui.c ...

  4. 如何在Mac上使用Netstat命令

    macOS上的netstat命令是一个终端命令,用于显示有关Mac网络通信的详细信息.网络通信包括Mac通过所有端口和所有应用程序与外界进行交流的所有方式.掌握netstat可以帮助您了解计算机之间的 ...

  5. 32.Java基础_异常

    JVM虚拟机默认异常处理机制 Java异常处理: 1.try...catch... 2.throw 1.try...catch... public class test{ public static ...

  6. 微信 PC HOOK

    一.概述 Web端有开源代码,但新用户登录不了 PC端也有开源代码,新老用户都能登录 市场上已有的产品:发卡机器人.多群转发机器人.营销管理机器人 基本的功能:收发消息,加人加群,收账抢红包 二.原理 ...

  7. C++ std::vector 基本用法

    #include <iostream> #include <vector> using namespace std; int main() { // 初始化的方式 std::v ...

  8. ubuntu18.04 安装 WPS 2019

    ubuntu自带的文字处理软件对来自windows下office或在WPS创建的ppt有点不兼容,看到WPS有linux版本的,便果断安装试一试. 一.卸载原生liboffice sudo apt-g ...

  9. C#_.NetFramework_WebAPI项目_EXCEL数据导出

    [推荐阅读我的最新的Core版文章,是最全的介绍:C#_.NetCore_Web项目_EXCEL数据导出] 项目需要引用NPOI的Nuget包: A-2--EXCEL数据导出--WebAPI项目--N ...

  10. linux创建用户并锁定用户目录和首次登陆强制修改密码

    1.     创建用户及访问目录 mkdir -p /home/user/testuser   创建用户目录 useradd testuser -d /home/user/testuser  -M   ...