React Native从零开始（五）Text

React Native从零开始（五）Text

一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。跟Android中的TextView差不多


这个例子跟官网的差不多，实现了点击事件和state属性和Text嵌套，整体的代码如下

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

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
function onPressTitle() {
    alert("点击事件");
}
export default class TextDemo extends Component {
    constructor(props){
        super(props);
        this.state = {
            titleText:"这个是标题",
            bodyText:"这个是内容部分"
        };
    }
    render() {
        return (
            <Text style={styles.baseText}>
                <Text style={styles.titleText} onPress={this.onPressTitle}>
                    {this.state.titleText + '\n\n'}
                </Text>
                <Text numberOfLines={5}>
                    {this.state.bodyText}
                    <Text style={{color:"cyan"}}>
                        内容中嵌套的Text字体颜色更改,我是SuperBigLw
                        <Text style={[{fontWeight:"bold"},{fontSize:30}]}>你好</Text>
                        呵呵~
                    </Text>
                </Text>
            </Text>
        );
    }
}

const styles = StyleSheet.create({
    baseText: {
        fontFamily: 'Cochin',
    },
    titleText: {
        fontSize: 20,
        fontWeight: 'bold',
    },
});

AppRegistry.registerComponent('TextDemo', () => TextDemo);

可以看出我们在Text中又嵌套了Text，子Text继承了父Text的属性，如果需要不同的话，那么需要重新设置。

 <Text style={{color:"cyan"}}>
                        内容中嵌套的Text字体颜色更改,我是SuperBigLw
                        <Text style={[{fontWeight:"bold"},{fontSize:30}]}>你好</Text>
                        呵呵~
                    </Text>

其他的属性看官网就好了