我的书签
添加书签
移除书签视图
创建 UI 最基本的组件，view 是一个容器，它支持 flexbox 布局、风格、一些触发处理，和可访问性控制，它被设计成嵌套在其他视图里，并且有 0 到很多个任意类型的孩子。view 直接映射到原生视图，相当于在任意正在运行的平台上的响应，不管它是 UIView，<div>，android.view，等等。这个例子创建了一个视图，将两个颜色的框和自定义的组件打包填充成一行。
1. <View style={{flexDirection: 'row', height: 100, padding: 20}}>
2. <View style={{backgroundColor: 'blue', flex: 0.3}} />
3. <View style={{backgroundColor: 'red', flex: 0.5}} />
4. <MyCustomComponent {...customProps} />
5. </View>
为了清晰和性能，视图被设计成与样式表一起使用，尽管是内联样式也同样支持。
工具
accessibilityLabel 字符串型
当用户与元素进行交互时，覆盖通过屏幕阅读器阅读的文本。在默认情况下，标签是通过遍历所有孩子和累积所有由空间隔开的文本节点创建的。
accessible 布尔型
当它的值为真时，说明视图是一个可访问的元素。在默认情况下，所有的可触发的元素都是可以被访问的。
onMoveShouldSetResponder 函数
对于大多数的触发交互，你可能只是想在 TouchableHighlight 或者 TouchableOpacity 里包装你的组件。为了进一步的探讨，检查 Touchable.js，ScrollResponder.js 和ResponderEventPlugin.js。
onResponderGrant 函数
onResponderMove 函数
onResponderReject 函数
onResponderRelease 函数
onResponderTerminate 函数
onResponderTerminationRequest 函数
onStartShouldSetResponder 函数
onStartShouldSetResponderCapture 函数
pointerEvents enum(‘box-none’, ‘none’, ‘box-only’, ‘auto’)
缺乏auto 属性，none 更像是 CSS 的 none 值。box-none 就好像你已经应用了 CSS 类：
1. .box-none {
2. pointer-events: none;
3. }
4. .box-none * {
5. pointer-events: all;
6. }
box-only 相当于
1. .box-only {
2. pointer-events: all;
3. }
4. .box-only * {
5. pointer-events: none;
6. }
但是由于 pointerEvents 并不影响布局/外观，通过添加附加模式，我们已经偏离了规范，我们选择在 style 上不包括 pointerEvents。在一些平台上，不管怎样偶们都需要将它作为一个 className 来实现。是否使用 style 时这个平台的实现细节。
removeClippedSubviews 布尔
这是一个通过 RCTView 显示的特定性能属性，当有很多子视图，并且它们大部分都是在幕后，这时被用于滚动内容。为了使这个属性有效，它必须被应用到一个视图中，在这个视图里包含很多子视图和外部约束。子视图中还应该有溢出：隐藏，应该包含视图（或者它的一个子视图）。
style 字体
backgroundColor 字符串
borderBottomColor 字符串
borderColor 字符串
borderLeftColor 字符串
borderRadius 数值
borderRightColor 字符串
borderTopColor 字符串
opacity 数值
overflow enum(‘visible’, ‘hidden’)
rotation 数值
scaleX 数值
scaleY 数值
shadowColor 字符串
shadowOffset {h: number, w: number}
shadowOpacity 数值
shadowRadius 数值
transformMatrix [数值]
translateX 数值
translateY 数值
testID 字符串型
在端到端测试中用于定位视图
例子
1. 'use strict';
2. var React = require('react-native');
3. var {
4. StyleSheet,
5. Text,
6. View,
7. } = React;
8. var styles = StyleSheet.create({
9. box: {
10. backgroundColor: '#527FE4',
11. borderColor: '#000033',
12. borderWidth: 1,
13. }
14. });
15. exports.title = '<View>';
16. exports.description = 'Basic building block of all UI.';
17. exports.displayName = 'ViewExample';
18. exports.examples = [
19. {
20. title: 'Background Color',
21. render: function() {
22. return (
23. <View style={{backgroundColor: '#527FE4', padding: 5}}>
24. <Text style={{fontSize: 11}}>
25. Blue background
26. </Text>
27. </View>
28. );
29. },
30. }, {
31. title: 'Border',
32. render: function() {
33. return (
34. <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
35. <Text style={{fontSize: 11}}>5px blue border</Text>
36. </View>
37. );
38. },
39. }, {
40. title: 'Padding/Margin',
41. render: function() {
42. return (
43. <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
44. <View style={[styles.box, {padding: 5}]}>
45. <Text style={{fontSize: 11}}>5px padding</Text>
46. </View>
47. <View style={[styles.box, {margin: 5}]}>
48. <Text style={{fontSize: 11}}>5px margin</Text>
49. </View>
50. <View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
51. <Text style={{fontSize: 11}}>
52. 5px margin and padding,
53. </Text>
54. <Text style={{fontSize: 11}}>
55. widthAutonomous=true
56. </Text>
57. </View>
58. </View>
59. );
60. },
61. }, {
62. title: 'Border Radius',
63. render: function() {
64. return (
65. <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
66. <Text style={{fontSize: 11}}>
67. Too much use of `borderRadius` (especially large radii) on
68. anything which is scrolling may result in dropped frames.
69. Use sparingly.
70. </Text>
71. </View>
72. );
73. },
74. }, {
75. title: 'Circle with Border Radius',
76. render: function() {
77. return (
78. <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
79. );
80. },
81. }, {
82. title: 'Overflow',
83. render: function() {
84. return (
85. <View style={{flexDirection: 'row'}}>
86. <View
87. style={{
88. width: 95,
89. height: 10,
90. marginRight: 10,
91. marginBottom: 5,
92. overflow: 'hidden',
93. borderWidth: 0.5,
94. }}>
95. <View style={{width: 200, height: 20}}>
96. <Text>Overflow hidden</Text>
97. </View>
98. </View>
99. <View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
100. <View style={{width: 200, height: 20}}>
101. <Text>Overflow visible</Text>
102. </View>
103. </View>
104. </View>
105. );
106. },
107. }, {
108. title: 'Opacity',
109. render: function() {
110. return (
111. <View>
112. <View style={{opacity: 0}}><Text>Opacity 0</Text></View>
113. <View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
114. <View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
115. <View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
116. <View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
117. <View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
118. <View style={{opacity: 1}}><Text>Opacity 1</Text></View>
119. </View>
120. );
121. },
122. },
123. ];
