文档章节

ReactNative: 使用Text文本组件

o
 osc_zoa3moe9
发布于 2019/12/07 22:11
字数 866
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、简言

初学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);

 

五、打印

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: [] }

 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
透过 Text 标签看 ReactNative 的设计理念

现在前端圈子最热的莫过于 ReactNative。以 Web 的开发方式来开发 Native,并且仗这 facebook 这个国际互联网公司做保证,这种革命性的产品都让前端 coder 和客户端 coder 都炸开了。本文打算...

SuShine
06/10
8
0
ReactNative从零开始笔记2-组件的生命周期

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、ReactNative提供了哪些组件 基础组件 View 基础组件 Text 文本组件 Image 图片...

摸着石头过河_崖边树
2019/01/18
0
0
ReactNative从零开始笔记3-state(状态)与props(属性)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、 props(属性) ReactNative(React)使用两种数据来控制一个组件:props 和 stat...

摸着石头过河_崖边树
2019/01/18
0
0
《React-Native系列》React-Native实战系列博客汇总

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hsbirenjie/article/details/53071969 从2016年7月份开始,坚持写ReactNative系列博客,记录工作中遇到的点滴...

coder_小刀
2016/11/07
0
0
《React-Native系列》React-Native实战系列博客汇总

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hsbirenjie/article/details/53071969 从2016年7月份开始,坚持写ReactNative系列博客,记录工作中遇到的点滴...

coder_小刀
2016/11/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mysql 通过binlog日志恢复数据

Binlog日志,即binary log,是二进制日志文件,有两个作用,一个是增量备份,另一个是主从复制,即主节点维护一个binlog日志文件,从节点从binlog中同步数据,也可以通过binlog日志来恢复数据...

osc_lduvstkg
42分钟前
18
0
前端js日期时间格式转换

前端前后端接口处理时经常会遇到需要转换不同时间格式的情况,比如时间戳格式转换成正常日期显示来进行前端展示。 下面是分享一些不同格式的日期转换函数方法。 /** * 时间戳转时间 * @param...

osc_gccs85s0
43分钟前
9
0
微服务中如何设计一个权限授权服务

基于角色的访问控制 (RBAC)   是将系统访问限制为授权用户的一种方法,是围绕角色和特权定义的与策略无关的访问控制机制,RBAC的组件使执行用户分配变得很简单。   在组织内部,将为各种...

osc_ie20bwji
45分钟前
12
0
前端js日期时间格式转换

前端前后端接口处理时经常会遇到需要转换不同时间格式的情况,比如时间戳格式转换成正常日期显示来进行前端展示。 下面是分享一些不同格式的日期转换函数方法。 /** * 时间戳转时间 * @param...

osc_sqfqhs81
47分钟前
38
0
(转)【D3D11游戏编程】学习笔记三:XNAMath之XMMATRIX

(注:【D3D11游戏编程】学习笔记系列由CSDN作者BonChoix所写,转载请注明出处:http://blog.csdn.net/BonChoix,谢谢~) 在熟悉了XMVECTOR的风格及规则之后,再来了XNA数学库中的矩阵就容易...

osc_yumj26qz
48分钟前
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部