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={{70}}>
                <Image source={require('./images/1.png')}
                style={styles.imageStyle}/>
                <Text style={styles.textStyle}>美食</Text>
                </View>
                <View style={{70}}>
                <Image source={require('./images/2.png')}
                       style={styles.imageStyle}/>
                <Text style={styles.textStyle}>酒店</Text>
              </View>
              <View style={{70}}>
                <Image source={require('./images/3.png')}
                style={styles.imageStyle}/>
                <Text style={styles.textStyle}>电影</Text>
              </View>
              <View style={{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={{70}}>
                  <Image source={require('./images/5.png')}
                  style={styles.imageStyle}/>
                  <Text style={styles.textStyle}>外卖</Text>
                </View>
                <View style={{70}}>
                  <Image source={require('./images/6.png')}
                  style={styles.imageStyle}/>
                  <Text style={styles.textStyle}>周边游</Text>
                </View>
              <View style={{70}}>
                <Image source={require('./images/7.png')}
                       style={styles.imageStyle}/>
                <Text style={styles.textStyle}>休闲娱乐</Text>
              </View>
              <View style={{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',
        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:设置阴影效果{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)样式继承规格:

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