RN控件之View Text

 /**
  * 模仿美团首页部分
  * */
 'use strict'
 import React,{
     AppRegistry,
     Component,
     StyleSheet,
     Text,
     View,
     Image,
 } from 'react-native';
 
 class TestImage extends Component {
   render(){
     return(
         <View style={styles.containerStyle}>
 
           <View style={{flexDirection:'row'}}>
                 <View style={{width:70}}>
                 <Image source={require('./images/1.png')}
                 style={styles.imageStyle}/>
                 <Text style={styles.textStyle}>美食</Text>
                 </View>
                 <View style={{width:70}}>
                 <Image source={require('./images/2.png')}
                        style={styles.imageStyle}/>
                 <Text style={styles.textStyle}>酒店</Text>
               </View>
               <View style={{width:70}}>
                 <Image source={require('./images/3.png')}
                 style={styles.imageStyle}/>
                 <Text style={styles.textStyle}>电影</Text>
               </View>
               <View style={{width:70}}>
                 <Image source={require('./images/4.png')}
                 style={styles.imageStyle}/>
                 <Text style={styles.textStyle}>旅游</Text>
               </View>
           </View>
           <View style={{flexDirection:'row',marginTop:10}}>
                 <View style={{width:70}}>
                   <Image source={require('./images/5.png')}
                   style={styles.imageStyle}/>
                   <Text style={styles.textStyle}>外卖</Text>
                 </View>
                 <View style={{width:70}}>
                   <Image source={require('./images/6.png')}
                   style={styles.imageStyle}/>
                   <Text style={styles.textStyle}>周边游</Text>
                 </View>
               <View style={{width:70}}>
                 <Image source={require('./images/7.png')}
                        style={styles.imageStyle}/>
                 <Text style={styles.textStyle}>休闲娱乐</Text>
               </View>
               <View style={{width:70}}>
                 <Image source={require('./images/8.png')}
                        style={styles.imageStyle}/>
                 <Text style={styles.textStyle}>今日新单</Text>
               </View>
           </View>
       </View>
   );
 
   }
 }
 const styles=StyleSheet.create(
 
     {
       imageStyle:{
         alignSelf:'center',
         width:45,
         height:45
       },
       textStyle:{
         marginTop:5,
         textAlign:'center',
         fontSize:11,
         color:'#555555'
       },
       containerStyle:{
         marginLeft:5,
         marginTop:10,
         marginRight:5
       }
 
     }
 );
 //第一个参数是package中name,第二个参数是需要注册的组件
 AppRegistry.registerComponent('MyProject',() =>TestImage);

一.View组件介绍

　　1.View是UI布局最基础,最常用的组件.其支持FlexBox布局,CSS样式以及相关触摸处理的容器组件,可以嵌套在其他View中,也可以包含多种类型的子视图.在Web,Android,IOS三种平台上面对应三种原生视图,分别是<div>,android.view,UIView

　　2.View中的属性

　　　　

　　　　

　　　　下面是一些响应链的方法:

　　　　

onMoveShouldSetResponder

onMoveShouldSetResponderCapture

onPresponderGrant,onResponderMove

onResponderReject,onResponderRelease

onResponderTerminate,onResponderTerminationRequest

onStartShouldSetResponder,onStartShouldSetResponderCapture

pointerEvents enum('box-none', 'none', 'box-only', 'auto')(触摸事件是否可以进行穿透控件View)

removeClippedSubviews:该控件由于进行优化性能，尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多，

已经超过父容器，并且子视图和父容器视图都有overflow:hidden风格样式

3.View的Style样式

下面是几个特殊的属性,有所有平台通用的,也只在Android平台有效果的属性

二.Text组件介绍

1.该组件为React中的一个基本组件,和Android的TextView组件类似,用来显示基本的文本信息,除了基本的显示布局之外,也可以进行嵌套布局

　　,设置样式,以及做事件处理.

2.属性

　　allowFontScalling(bool):控制字体是否根据iOS的设置进行自动缩放-iOS平台,Android平台不适用.

　　numberOfLines(number):进行设置Text显示文本的行数,如果超出行数,默认其他多余的就不显示了

　　onLayout(function):当布局位置发生变动的时候自动触发该方法,function的参数如下:　　

　　　[code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]　

　　onPress(function):该方法在文本发生点击的时候调用

3.Style样式

　　(1)继承View组件的所有Style

　　(2)color:字体颜色

　　(3)fontFamily:字体名称

　　(4)fontStlye:字体风格(normal,italic)

(5)fontWeight:字体粗细('normal','bold','100','200')

(6)fontSize:字体大小

(7)textShadowOffset:设置阴影效果{width:number,height:number}

(8)textShaowRadius:阴影效果圆角

(9)textShadowColr:阴影效果的颜色

(10)letterSpacing:字符间距

(11)lineHeight:行高

(12)textAlign:文本对齐方式('auto','left','right','')

(13)textDecorationLine:横线位置('none','underline','line-through','underline line-through')

(14)textDecorationStyle:线的风格('solid','')

(15)textDecorationColor:线的颜色

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

4.注意点

　　(1)嵌套特点:和Web上面的设计方案,我们通过嵌套包裹的方案,相同的属性可以用父标签进行包裹,然后内部特殊的文本采用子标签方案

　　(2)容器布局规则:之前介绍View组件,我们知道该组件是支持FlexBox(弹性布局),但是Text组件直接是文本布局的,也就是说一个Text接着Text,

　　　　　　　　　　横向,如果文本已经到末尾了,那就直接换行.

　　(3)但是如果父控件采用View,View是支持FlexBox布局的,两个Text默认会垂直分布

　　(4)样式继承规格:

　　　　组件可以嵌套,而且样式还支持继承,也就是说父组件定义了相关样式,如果子组件没有重写样式的话,那么该子组件也会继承父组件定义的样式.