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)樣式繼承規格:

　　　　組件可以嵌套,而且樣式還支持繼承,也就是說父組件定義了相關樣式,如果子組件沒有重寫樣式的話,那么該子組件也會繼承父組件定義的樣式.