React Native组件（二）View组件解析

最新推荐文章于 2024-04-29 00:32:49 发布

刘望舒

最新推荐文章于 2024-04-29 00:32:49 发布

阅读量5.4k

点赞数

分类专栏： React Native 文章标签： react-native view组件

本文链接：https://blog.csdn.net/itachi85/article/details/73773243

版权

本文详细解析React Native中的View组件，包括其作为基础容器的角色、Flexbox布局支持、样式属性如shadow、elevation、border以及transform等，并探讨了iOS和Android平台的差异。同时，还介绍了触摸事件回调函数、pointerEvents属性和性能优化相关属性。

摘要由CSDN通过智能技术生成

相关文章
React Native探索系列
 React Native组件系列

前言

了解了RN的组件的生命周期后，我们接着来学习RN的具体的组件。View组件是最基本的组件，也是首先要掌握的组件，这一篇我们来学习View组件。

1.概述

View组件是RN中最基本的组件，绝大部分的组件都继承了View组件的属性，所以学习其他组件前，要首先掌握View组件。
View组件是一个支持Flexbox布局、样式、一些触摸处理的容器，它可以放到其它的组件里，也可以有任意多个任意类型的子组件。View组件对应着多个平台的视图，比如Android的View以及iOS的UIView。
由于View组件的属性非常多，这里主要介绍一些常用的属性。

2.style属性

style属性作为组件属性中的一种，它包含了多种属性，这里对它们意义进行讲解。

2.1 Flexbox

View组件的Flexbox属性这里就不再介绍了，详细请看React Native探索（四）Flexbox布局详解这一篇文章。正是因为View组件提供了Flexbox属性，因此，继承了View组件的其他组件也都具有Flexbox属性。

2.2 shadow相关 (iOS)

View组件提供了四种阴影属性如下表：

样式名	参数属性	说明
shadowColor	color	设置阴影颜色
shadowOffset	{width: number, height: number}	设置阴影位移值
shadowOpacity	number	设置阴影透明度
shadowRadius	number	设置阴影模糊半径

设置View组件的阴影属性并没有什么意义，在View组件中定义这些样式是为了让继承它的组件去各自实现这些效果，比如Text组件。需要注意的是只有iOS平台能使用shadow属性。

2.3 elevation (Android)

elevation取值为number。Android平台没有shadow来设置阴影，但是，可以用elevation属性来间接的设置阴影。它使用Android原生的 elevation API来设置组件的高度，这样就会在界面上呈现出阴影的效果，此属性仅支持Android 5.0及以上版本。

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View} from 'react-native';
class ViewApp extends Component {
    render() {
        return (
             <View style={
     {flex: 1, justifyContent: 'center',
                   alignItems:'