一.簡介
作為創(chuàng)建UI時(shí)最基礎(chǔ)的組件，View是一個(gè)支持Flexbox布局、樣式、一些觸摸處理、和一些無障礙功能的容器，并且它可以放到其它的視圖里，也可以有任意多個(gè)任意類型的子視圖。不論在什么平臺上，View都會(huì)直接對應(yīng)一個(gè)平臺的原生視圖，無論它是UIView、<div>還是android.view.View。
二.示例
import React, { AppRegistry, Component, StyleSheet, PixelRatio, Text, View } from 'react-native'; class ViewDemo extends Component { render() { return ( <View style={styles.flex}> <View style={styles.container}> <View style={[styles.item,styles.center]}> <Text style={styles.font}>中國</Text> </View> <View style={[styles.item,styles.lineLeftRight]}> <View style={[styles.center,styles.flex,styles.lineCenter]}> <Text style={styles.font}>北京</Text> </View> <View style={[styles.center,styles.flex]}> <Text style={styles.font}>上海</Text> </View> </View> <View style={styles.item}> <View style={[styles.center,styles.flex,styles.lineCenter]}> <Text style={styles.font}>廣州</Text> </View> <View style={[styles.center,styles.flex]}> <Text style={styles.font}>深圳</Text> </View> </View> </View> </View> ); } } const styles =StyleSheet.create({ container:{ borderRadius:5, marginLeft:5, marginRight:5, marginTop:300, backgroundColor:'#FF0067', padding:2, height:84, flexDirection:'row', }, flex:{ flex:1, }, item:{ flex: 1, height:80, }, font:{ color:'#fff', fontSize:16, fontWeight:'bold', }, center:{ justifyContent:'center', alignItems:'center' }, linerCenter:{ borderBottomWidth:1/PixelRatio.get(), borderColor:'#fff', }, lineLeftRight:{ borderLeftWidth:1/PixelRatio.get(), borderRightWidth:1/PixelRatio.get(), borderColor:'#fff', }, });
效果如下
三.屬性
- accessibilityLabel string
設(shè)置當(dāng)用戶與此元素交互時(shí)，“讀屏器”（對視力障礙人士的輔助功能）閱讀的文字。默認(rèn)情況下，這個(gè)文字會(huì)通過遍歷所有的子元素并累加所有的文本標(biāo)簽來構(gòu)建。 - accessible bool
當(dāng)此屬性為true時(shí)，表示此視圖時(shí)一個(gè)啟用了無障礙功能的元素。默認(rèn)情況下，所有可觸摸操作的元素都是無障礙功能元素。 - onAccessibilityTap function
當(dāng)accessible為true時(shí)，如果用戶對一個(gè)已選中的無障礙元素做了一個(gè)雙擊手勢時(shí)，系統(tǒng)會(huì)調(diào)用此函數(shù)。（譯注：此事件是針對殘障人士，并非是一個(gè)普通的點(diǎn)擊事件。如果要為View添加普通點(diǎn)擊事件，請直接使用Touchable系列組件替代View，然后添加onPress函數(shù)）。 - onLayout
當(dāng)組件掛載或者布局變化的時(shí)候調(diào)用，參數(shù)為：
{nativeEvent: { layout: {x, y, width, height}}}
這個(gè)事件會(huì)在布局計(jì)算完成后立即調(diào)用一次，不過收到此事件時(shí)新的布局可能還沒有在屏幕上呈現(xiàn)，尤其是一個(gè)布局動(dòng)畫正在進(jìn)行中的時(shí)候。 - onMagicTap
當(dāng)accessible為true時(shí)，如果用戶做了一個(gè)雙指輕觸(Magic tap)手勢，系統(tǒng)會(huì)調(diào)用此函數(shù)。
此外還有
onMoveShouldSetResponder，onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,
onResponderReject,onResponderRelease,
onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,
pointerEvents enum('box-none', 'none', 'box-only', 'auto')(觸摸事件是否可以進(jìn)行穿透控件View);
removeClippedSubviews:該控件由于進(jìn)行優(yōu)化性能，尤其在一些滑動(dòng)控件上面。該屬性生效的要求如下:首先子視圖的內(nèi)容非常多，
四.style
backfaceVisibility enum('visible', 'hidden')
enum('visible', 'hidden')定義界面翻轉(zhuǎn)的時(shí)候是否可見backgroundColor string
背景顏色borderColor string
邊框顏色borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
邊框圓角大小borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum('solid', 'dotted', 'dashed')
邊框線的風(fēng)格,這個(gè)和CSS樣式一樣的,enum('solid', 'dotted', 'dashed')borderWidth number
邊框?qū)挾?/p>borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
opacity number
設(shè)置透明度overflow enum('visible', 'hidden')
設(shè)置內(nèi)容超過容器顯示還是隱藏testID string
用來在端到端測試中定位這個(gè)視圖accessibilityComponentType (android平臺)
定義是否該UI組件和原生組件一致化處理accessibilityLiveRegion enum('none','polite','assertive') (android平臺)
告知無障礙服務(wù)當(dāng)此視圖更新時(shí)，是否要通知用戶。只對Android API >= 19 的設(shè)備有效collapsable bool(android平臺)
如果一個(gè)View只用于布局它的子組件，則它可能會(huì)為了優(yōu)化而從原生布局樹中移除。 把此屬性設(shè)為false可以禁用這個(gè)優(yōu)化，以確保對應(yīng)視圖在原生結(jié)構(gòu)中存在。.importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平臺)
設(shè)置視圖響應(yīng)事件等級needsOffscreenAlphaCompositing (android平臺)
設(shè)置View是否需要渲染和半透明度效果處理的先后次序。renderToHardwareTextureAndroid (android)
設(shè)置是否需要GPU進(jìn)行渲染accessibilityTraits (ios平臺)
為讀屏器提供更多屬性。除非在元素里指定，默認(rèn)情況下不提供任何屬性。shouldRasterizeIOS boolean (ios平臺)
決定這個(gè)視圖是否需要在被混合之前繪制到一個(gè)位圖上
