View组件是React Native中用户界面的基本构建块。它是一个支持Flexbox布局、样式、触摸处理和可访问性功能的容器。本文档将介绍核心的View组件、它的属性、样式能力以及跨平台的实现细节。
有关ScrollView和其他专用视图容器的信息，请参阅ScrollView和列表。有关视图的动画功能，请参阅动画系统。
View组件是React Native中最基本的UI构建块。它等同于Web开发中的div、iOS中的UIView以及Android中的android.view。View设计用于嵌套在其他View中，并且可以包含任意数量的子组件。
View组件实现为一个平台特定原生组件的包装器。当您在JavaScript代码中使用View时，React Native会在底层平台创建一个相应的原生视图。
View的JavaScript实现定义在packages/react-native/Libraries/Components/View/View.js 它是一个简单的React组件，它会将props转发给原生组件实现。
来源
View组件接受广泛的属性来控制它们的显示、行为和布局。这些属性可以分为几类：
布局属性控制视图如何定位自身及其子项。React Native使用基于Flexbox的布局系统，类似于Web上的CSS，但有一些区别。
关键布局属性包括：
| 属性 | 类型 | 描述 |
|---|---|---|
flex | 数字 | 填充空间的相对数量 |
flexDirection | 字符串 | 子项布局方向（“row”，“column”等） |
justifyContent | 字符串 | 沿主轴的对齐方式 |
alignItems | 字符串 | 沿交叉轴的对齐方式 |
width | number|string | 组件的宽度 |
height | number|string | 组件的高度 |
position | 字符串 | 定位方法（“absolute”，“relative”，“static”） |
padding* | number|string | 组件边框内的空间 |
margin* | number|string | 组件边框外的空间 |
来源
样式属性控制视图在其布局之外的视觉外观。
| 属性 | 类型 | 描述 |
|---|---|---|
backgroundColor | color | 背景颜色 |
borderWidth | 数字 | 边框的宽度 |
borderColor | color | 边框的颜色 |
borderRadius | 数字 | 圆角半径 |
opacity | 数字 | 透明度（0-1） |
shadowColor | color | 阴影颜色（iOS） |
elevation | 数字 | 投影效果（Android） |
transform | array | 变换数组 |
zIndex | 数字 | 控制视图的层叠顺序 |
来源
View组件可以响应各种触摸和交互事件。
| 属性 | 描述 |
|---|---|
onPress | 当视图被按下时调用 |
onLongPress | 长按手势后调用 |
onPressIn | 按下手势开始时调用 |
onPressOut | 按下手势结束时调用 |
onTouchStart | 触摸开始时调用 |
onTouchMove | 触摸移动时调用 |
onTouchEnd | 触摸结束时调用 |
来源
View组件还包含支持可访问性功能的属性。
| 属性 | 描述 |
|---|---|
accessible | 指示视图是否为可访问元素 |
accessibilityLabel | 屏幕阅读器读取的文本 |
accessibilityHint | 屏幕阅读器读取的提示文本 |
accessibilityRole | 此元素的角色（例如，“button”，“link”） |
accessibilityState | 组件的当前状态（例如，disabled） |
来源
React Native提供了专门的StyleSheet API来定义组件样式。React Native中的样式与Web上的CSS样式相似，但使用驼峰式命名。
与Web CSS不同，React Native的样式继承是有限的。大多数样式不会自动从父组件继承到子组件。然而，特定于文本的样式会在Text组件内继承。
来源
View的实现涉及JavaScript、C++和特定于平台的代码的多个层。
View组件使用Shadow Node系统，该系统独立于渲染来处理布局计算。
Shadow Node系统：
来源
C++实现定义了跨平台使用的基础视图属性。
Base View 属性的关键类别包括：
来源
在iOS上，View组件映射到UIView，并由RCTViewManager管理。
来源
在Android上，View组件映射到各种Android View类，由ViewManager类管理。
来源
可以使用transform属性来转换视图，该属性接受一个变换对象数组。
来源
可以使用Animated API来为视图添加动画。Animated.View组件是View的一个特化版本，可以与动画系统配合使用。
来源
视图可以被嵌套以创建复杂的UI。zIndex 属性控制着重叠视图的堆叠顺序。
来源
React Native 为 iOS 和 Android 提供了不同的阴影机制。
来源
来源
StyleSheet.create 以获得更好的运行时性能和类型检查。flex: 1 使组件扩展以填充可用空间。removeClippedSubviews={true}。position: 'absolute' 以用于覆盖和固定定位。TouchableOpacity 而不是带点击事件处理器的视图）。视图与其他 React Native 子系统集成。
来源