[React-Native]RN组件学习-Text

1、在<View>中使用<Text>组件

如：

 <View>
     <Text style={styles.container1}>Hello,World!</Text>
     <Text style={styles.container2}>Hello,World2!</Text>
 </View>

是两行，如果希望不是两行，那么只需要嵌套就行了：

<Text>
 Hello,World2!
 <Text>
     Hello,world3!
    </Text>
</Text>

2、使用样式

 <Text style={styles.container1}>Hello,World!</Text>

通过这样引用style样式，其中，如果：

<Text style={styles.container2}>
    Hello,World2!
    <Text>
        Hello,world3!
    </Text>
</Text>

则Hello,world3会继承container2的样式。

3、Text常用的css样式

    container: {
        // 颜色
        color: 'red',
        // 字体大小
        fontSize: 20,
        // 字体名称
        fontFamily: "Georgia",
        // 字体风格
        fontStyle: 'italic',
        // 字体粗细
        fontWeight: '300',
        // 文字阴影偏移
        textShadowOffset: {width: 30, height: 30},
        // 文字阴影颜色
        textShadowColor: 'green',
        // 文字阴影圆角的大小
        textShadowRadius: 10,
        // 字间距(好像效果不大)
        letterSpacing: 100,
        // 行高度
        lineHeight: 50,
        // 文字对齐方式
        textAlign: 'center',
        // 文字下划线
        textDecorationLine: 'underline',
        // 下划线的样式,好像没效果
        textDecorationStyle: 'dashed',
        // 好像也没效果
        textDecorationColor: 'blue',
        // 好像真没效果啊
        writingDirection: 'rtl',
    }

4、一个例子：

// 文字阴影偏移
textShadowOffset: {width: 30, height: 30},
// 文字阴影颜色
textShadowColor: 'green',
// 文字阴影圆角的大小
textShadowRadius: 10,

这样，会营造出这样的效果：

阴影