React Native---Text组件

React Native

Text

1. 什么是Text

Text是一个用于显示文本的React组件，和Android中的TextView组件类似，专门用来显示基本的文本信息；除了基本的显示布局之外，可以进行嵌套显示，设置样式，以及可以做事件处理。

2. Text组件常用的属性方法

Attributes.style = {
    color string
    containerBackgroundColor string
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    lineHeight number
    textAlign enum("auto", 'left', 'right', 'center')
    writingDirection enum("auto", 'ltr', 'rtl')
    numberOfLines number
    textAlign ("auto", 'left', 'right', 'center', 'justify')
    fontWeight ("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    onPress  fcuntion
 }

注释如下：

`color` 字体颜色

 `numberOfLines` (number) 进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了

`onPress` (fcuntion)  该方法当文本发生点击的时候调用该方法

 `color`  字体颜色

`fontFamily`  字体名称

`fontSize`  字体大小

`fontStyle`   字体风格(normal,italic)

`fontWeight ` 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

`textShadowOffset`  设置阴影效果{width: number, height: number}

`textShadowRadius`  阴影效果圆角

`textShadowColor`  阴影效果的颜色

`letterSpacing`  字符间距

`lineHeight`  行高

`textAlign`   文本对其方式("auto", 'left', 'right', 'center', 'justify')

`textDecorationLine`  横线位置 ("none", 'underline', 'line-through', 'underline line-through')

`textDecorationStyle` 线的风格("solid", 'double', 'dotted', 'dashed')

 `textDecorationColor` 线的颜色

`writingDirection` 文本方向("auto", 'ltr', 'rtl')

3. Text组件中常用属性的应用以及Text组件样式的继承

export default class App extends Component {
    render() {
        return(
            <View style={styles.rootView}>
                <Text style={styles.textStyle}>
                    我是一段有个性的文字，我的名字叫"WM"
                </Text>

                <Text style={{color:"yellow",fontSize:18}}>
                    <Text>
                        <Text style={styles.text2Style}>
                            Text组件的属性是可以多重继承的
                        </Text>
                    </Text>
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    rootView: {
        flex:1,
        backgroundColor:"yellowgreen",
        justifyContent:"center",
        alignItems:"center"
    },
    textStyle: {
        color:"white",
        backgroundColor:"red",
        width:500,
        textAlign:"right",
        lineHeight:30,
        fontSize:20,
        fontWeight:"bold",
        letterSpacing:5,
        textDecorationLine:"line-through",
        textDecorationStyle:"solid",
        textDecorationColor:"black"
    },
    text2Style: {
        backgroundColor:'#00FF00'
    }
});