創(chuàng)建 UI 最基本的組件,view
是一個容器,它支持 flexbox 布局、風格、一些觸發(fā)處理,和可訪問性控制,它被設計成嵌套在其他視圖里,并且有 0 到很多個任意類型的孩子。view
直接映射到原生視圖,相當于在任意正在運行的平臺上的響應,不管它是 UIView
,<div>
,android.view
,等等。這個例子創(chuàng)建了一個視圖,將兩個顏色的框和自定義的組件打包填充成一行。
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<MyCustomComponent {...customProps} />
</View>
為了清晰和性能,視圖被設計成與樣式表一起使用,盡管是內(nèi)聯(lián)樣式也同樣支持。
accessibilityLabel 字符串型
當用戶與元素進行交互時,覆蓋通過屏幕閱讀器閱讀的文本。在默認情況下,標簽是通過遍歷所有孩子和累積所有由空間隔開的文本節(jié)點創(chuàng)建的。
accessible 布爾型
當它的值為真時,說明視圖是一個可訪問的元素。在默認情況下,所有的可觸發(fā)的元素都是可以被訪問的。
onMoveShouldSetResponder 函數(shù)
對于大多數(shù)的觸發(fā)交互,你可能只是想在 TouchableHighlight
或者 TouchableOpacity
里包裝你的組件。為了進一步的探討,檢查 Touchable.js
,ScrollResponder.js
和ResponderEventPlugin.js
。
onResponderGrant 函數(shù)
onResponderMove 函數(shù)
onResponderReject 函數(shù)
onResponderRelease 函數(shù)
onResponderTerminate 函數(shù)
onResponderTerminationRequest 函數(shù)
onStartShouldSetResponder 函數(shù)
onStartShouldSetResponderCapture 函數(shù)
pointerEvents enum('box-none', 'none', 'box-only', 'auto')
缺乏auto
屬性,none
更像是 CSS
的 none
值。box-none
就好像你已經(jīng)應用了 CSS
類:
.box-none {
pointer-events: none;
}
.box-none * {
pointer-events: all;
}
box-only
相當于
.box-only {
pointer-events: all;
}
.box-only * {
pointer-events: none;
}
但是由于 pointerEvents
并不影響布局/外觀,通過添加附加模式,我們已經(jīng)偏離了規(guī)范,我們選擇在 style
上不包括 pointerEvents
。在一些平臺上,不管怎樣偶們都需要將它作為一個 className
來實現(xiàn)。是否使用 style
時這個平臺的實現(xiàn)細節(jié)。
removeClippedSubviews 布爾
這是一個通過 RCTView 顯示的特定性能屬性,當有很多子視圖,并且它們大部分都是在幕后,這時被用于滾動內(nèi)容。為了使這個屬性有效,它必須被應用到一個視圖中,在這個視圖里包含很多子視圖和外部約束。子視圖中還應該有溢出:隱藏,應該包含視圖(或者它的一個子視圖)。
backgroundColor 字符串
borderBottomColor 字符串
borderColor 字符串
borderLeftColor 字符串
borderRadius 數(shù)值
borderRightColor 字符串
borderTopColor 字符串
opacity 數(shù)值
overflow enum('visible', 'hidden')
rotation 數(shù)值
scaleX 數(shù)值
scaleY 數(shù)值
shadowColor 字符串
shadowOffset {h: number, w: number}
shadowOpacity 數(shù)值
shadowRadius 數(shù)值
transformMatrix [數(shù)值]
translateX 數(shù)值
translateY 數(shù)值
testID 字符串型
在端到端測試中用于定位視圖
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
borderColor: '#000033',
borderWidth: 1,
}
});
exports.title = '<View>';
exports.description = 'Basic building block of all UI.';
exports.displayName = 'ViewExample';
exports.examples = [
{
title: 'Background Color',
render: function() {
return (
<View style={{backgroundColor: '#527FE4', padding: 5}}>
<Text style={{fontSize: 11}}>
Blue background
</Text>
</View>
);
},
}, {
title: 'Border',
render: function() {
return (
<View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<Text style={{fontSize: 11}}>5px blue border</Text>
</View>
);
},
}, {
title: 'Padding/Margin',
render: function() {
return (
<View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
</View>
<View style={[styles.box, {margin: 5}]}>
<Text style={{fontSize: 11}}>5px margin</Text>
</View>
<View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
<Text style={{fontSize: 11}}>
5px margin and padding,
</Text>
<Text style={{fontSize: 11}}>
widthAutonomous=true
</Text>
</View>
</View>
);
},
}, {
title: 'Border Radius',
render: function() {
return (
<View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
<Text style={{fontSize: 11}}>
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames.
Use sparingly.
</Text>
</View>
);
},
}, {
title: 'Circle with Border Radius',
render: function() {
return (
<View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
);
},
}, {
title: 'Overflow',
render: function() {
return (
<View style={{flexDirection: 'row'}}>
<View
style={{
width: 95,
height: 10,
marginRight: 10,
marginBottom: 5,
overflow: 'hidden',
borderWidth: 0.5,
}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow hidden</Text>
</View>
</View>
<View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow visible</Text>
</View>
</View>
</View>
);
},
}, {
title: 'Opacity',
render: function() {
return (
<View>
<View style={{opacity: 0}}><Text>Opacity 0</Text></View>
<View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
<View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
<View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
<View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
<View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
<View style={{opacity: 1}}><Text>Opacity 1</Text></View>
</View>
);
},
},
];