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

 

五、打印

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