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

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文本组件

最新文章

热门文章