提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

React Native组件之Text

组件React native Text
2023-09-27 14:29:03 时间

React Native组件之Text相当于iOS中的UILabel.

其基本属性如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
  * Sample React Native App
  * https://github.com/facebook/react-native
  * 周少停 Text
  * 2016-10-08
  */
 
import  React, { Component } from  'react' ;
import  {
   AppRegistry,
   StyleSheet,
   Text,
   View
} from  'react-native' ;
 
class  Project  extends  Component {
   render() {
     return  (
       <View style={styles.container}>
         <Text style={styles.textViewStyle} numberOfLines={6}>
           演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字
         </Text>
       </View>
     );
   }
}
 
const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent:  'center' ,
     alignItems:  'center' ,
     backgroundColor:  '#F5FCFF' ,
   },
   textViewStyle:{
     color: 'red' ,   //字体颜色
     fontSize:23,   //字体大小
     fontStyle: 'normal' ,    //字体风格,枚举值,normal,bold
     fontWeight:  'bold' ,      //字体粗细权重,枚举值,normal,bold,100,200,300,400,500,600,700,800,900
     textShadowOffset:{width:3, height:4},  //阴影效果
     textShadowRadius: 2,  //阴影效果圆角
     textShadowColor: 'yellow' , //阴影效果颜色
     letterSpacing:3 ,  //字符间距
     lineHeight:80 ,  //行高
     textAlign: 'center' ,  //文字对齐方式,枚举值:auto left right center justify
     textDecorationLine: 'underline' ,  //横线位置,枚举值,none,underline,line-through,underline line-through
     textDecorationStyle: 'solid' ,  //线的风格,solid double dotted dashed
     textDecorationColor: 'red' ,  //线的颜色
     writingDirection: 'ltr'  //文本方向.枚举值,auto,ltr,rtl
   }
});
 
AppRegistry.registerComponent( 'Project' , () => Project);

　　完整源码下载：https://github.com/pheromone/React-Native-1

相关文章