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

2022-12-20 17:20:38

相关文章

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:'center',backgroundColor:'white'}}>
                   <View style={styles.shadow}/>
             </View>
        );
    }
}
const styles = StyleSheet.create({
    shadow: {
        height: 120,
        width: 120,
        backgroundColor: 'black',
        elevation: 20,
        shadowOffset: {width: 0, height: 0},
        shadowColor: 'black',
        shadowOpacity: 1,
        shadowRadius: 5
    }
});
AppRegistry.registerComponent('ViewSample', () => ViewApp);

在iOS平台运行如上代码，效果为：

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

在Android平台运行效果则为：

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

很明显，elevation的效果远远不及shadow，这时我们可以采用第三方库react-native-shadow。

2.4 border相关

borderStyle的取值为 enum(‘solid’, ‘dotted’, ‘dashed’)，用来设置边框的风格，三个值分别对应着实线边框、点状边框和虚线边框，默认值为solid。

除了可以设置边框的风格，还可以用定义边框的颜色和边框的圆角。边框的颜色设置有borderColor、borderTopColor 、borderRightColor 、borderBottomColor 、borderLeftColor，取值都为string，通常情况下用borderColor就足够了。

边框的圆角设置有borderRadius 、borderTopLeftRadius 、borderTopRightRadius 、borderBottomLeftRadius 、borderBottomRightRadius，取值为number。

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text} from 'react-native';
class ViewApp extends Component {
    render() {
        return (
            <View style={styles.viewStyle}>
                <View style={styles.viewTextStyle}>
                    <Text style={styles.textStyle}>border</Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    viewTextStyle: {
        justifyContent: 'center',
        alignItems:'center',
        width: 80,
        height: 50,
        borderWidth:1,
        borderStyle:'dashed',
        borderRadius:10,
        borderColor:'red'
    },
    textStyle: {
        fontSize: 20
    }
});
AppRegistry.registerComponent('ViewSample', () => ViewApp);

上面的例子用到了border相关的属性。需要注意的是，如果不设置borderRadius，borderStyle的dotted和dashed的取值会无效，效果如下图所示。

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

2.5 transform

transform的取值为：

[{perspective: number},
{rotate: string},
{rotateX: string},
{rotateY: string},
{rotateZ: string},
{scale: number},
{scaleX: number},
{scaleY: number},
{translateX: number},
{translateY: number},
{skewX: string},
{skewY: string}]

transform的取值总的来说，共分为四种类型：translate、scale、rotate和skew，分别用来设置View组件的平移、缩放、旋转和倾斜。

View组件用transform属性的效果不是很明显，绝大部分组件都继承了View组件的transform属性，比如Text。我们改写2.4小节中的例子，将textStyle改为如下代码：

textStyle: {
        fontSize: 20,
        transform: [{rotate: '40deg'}, {scale: 0.9}, {translateY: 10}]
    }

运行效果如下：

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

对于translate、scale、rotate的效果，Android开发者会非常熟悉，那么rotate和skew有什么区别呢？再来修改textStyle：

textStyle: {
        fontSize: 20,
        transform:[{skewY:'40deg'}]
    }

运行效果如下：

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

从两个图的效果可以看出，rotate和skew的区别就是：rotate在旋转的同时，不会改变Text组件的形态，而skew则随着倾斜角度的改变，Text组件的形态也会发生相应的变化。如果我们加大skew的倾斜角度，比如60deg，Text组件的形态则会变为下图的效果。

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

2.6 overflow (iOS)

overflow取值为enum(‘visible’, ‘hidden’)。它用来定义当View组件的子组件的宽高超过View组件宽高时的行为，默认值为hidden，即隐藏超出的部分。overflow只在iOS平台有效，在Android平台即使设置overflow为visible，呈现的还会是hidden的效果。

2.7 backgroundColor

backgroundColor取值为string。它用来设定背景颜色，默认的颜色为非常浅的灰色，只有Text和TextInput组件继承了父组件的背景颜色，其他的组件都要设置自己的背影颜色。

2.8 opacity

opacity 的取值为0到1，当值为0时，表示组件完全透明，而值为1时，则表示组件完全不透明。

3.属性

3.1 触摸事件回调函数

触摸事件回调函数用来处理用户的触摸屏幕操作，一般情况下，触摸事件都是在其他组件中完成的。关于触摸事件是一个比较大的知识点，这里只介绍这些触摸事件回调函数的作用。

  • onStartShouldSetResponder： 触摸事件为touchDown时，是否申请成为事件响应者，接收触摸事件。如果返回true，则表示组件需要成为事件响应者。
  • onStartShouldSetResponderCapture：触摸事件为touchDown时，是否要拦截此事件，阻止子组件接收该事件，如果返回true，则表示要进行拦截。
  • onMoveShouldSetResponder ： 触摸事件为TouchMove时，是否申请成为事件响应者，接收触摸事件。如果返回true，则表示组件需要成为事件响应者。
  • onMoveShouldSetResponderCapture ：触摸事件为TouchMove时，是否要拦截此事件，阻止子组件接收该事件。
  • onResponderGrant： 申请成为事件响应者成功，组件开始接收触摸事件 。
  • onResponderReject： 申请成为事件响应者失败，其他组件正在进行事件处理 。
  • onResponderMove：触摸手指移动的事件（TouchMove）。
  • onResponderTerminationRequest：在组件成为事件响应者期间，其他组件申请成为响应者，返回为true，则表示同意释放响应者角色。
  • onResponderTerminate：如果组件释放响应者角色，会回调该函数，通知组件事件响应处理被终止了。这个回调也会发生在系统直接终止组件的事件处理，例如用户在触摸操作过程中，突然来电话的情况。
  • onResponderRelease：表示触摸完成（touchUp）的时候的回调，表示用户完成了本次的触摸交互。

3.2 pointerEvents

pointerEvents的取值为enum(‘box-none’, ‘none’, ‘box-only’, ‘auto’) 。它用来控制当前视图是否可以作为触控事件的目标。

在开发中，很多组件是被布局到手机界面上的，其中一些组件会遮盖住它的位置下方的组件，有一些场景需要被遮盖住的组件来处理事件。比如一个地图组件上覆盖了一个图像组件用来显示信息，但是我们不想这个图像组件影响用户的手指拖动地图的操作，这时就可以使用图像组件从View组件继承得到的pointerEvents属性来解决这个问题。

pointerEvents的取值含义如下所示：

  • none：组件自身不能作为触控事件的目标，交由父组件处理。
  • box-none：组件自身不能作为触控事件的目标，但其子组件可以。
  • box-only：组件自身可以作为触控事件的目标，但其子组件不能。
  • auto：组件可以作为触控事件的目标。

3.3 removeClippedSubviews

removeClippedSubviews的取值为bool。它的一个特殊的与性能优化相关的属性，通常在ListView和ScrollView中使用，当组件有很多子组件不在屏幕显示范围时，可以将removeClippedSubviews设置为true，允许释放不在显示范围子组件，从而优化了性能。需要注意的是，要想让此属性生效，要确保overflow属性为默认的hidden。

3.4 动画相关

needsOffscreenAlphaCompositing (Android)

needsOffscreenAlphaCompositing的取值为bool，是Android平*有的属性。它用来决定视图是否要先离屏渲染再进行半透明度处理，来确保颜色和混合效果正确。为了正确的显示透明表现而进行离屏渲染会带来极大的开销，对于非原生开发者来说很难调试，因此，它的默认值为false。

renderToHardwareTextureAndroid (Android)

renderToHardwareTextureAndroid的取值为bool，同样是是Android平*有的属性。它用来决定视图是否要把它本身（以及所有的子视图）渲染到一个GPU上的硬件纹理中。

在Android平台上，这对于只修改透明度、旋转、位移和缩放的动画和交互是很有用的：视图不必每次都重新绘制，显示列表也不需要重新执行，纹理可以被重用于不同的参数。负面作用是这会大量消耗显存，所以当交互/动画结束后应该把此属性设置回false。

shouldRasterizeIOS (iOS)

shouldRasterizeIOS的取值为bool，是iOS平*有的属性。它决定视图是否需要在被混合之前绘制到一个位图上。

这对于动画和交互来说是有很有用的，它不会修改这个组件的尺寸和它的子组件。举例来说，当我们移动一个静态视图的位置的时候，栅格化允许渲染器重用静态视图的缓存位图，并快速合成。

栅格化会导致离屏的绘图传递，位图会消耗内存。所以使用此属性需要进行充分的测试和评估。

还有一些View属性这里没有给出，比如RN为了方便失能人士使用手机而提供的相关属性等等，具体的属性请查看官方文档。

参考资料

官方文档

《React Native跨平台移动应用开发》第二版

React Native 中如何给 Navigator 添加一条合格的阴影

React Native 触摸事件处理详解

React Native中pointerEvent属性

欢迎关注我的微信公众号，第一时间获得博客更新提醒，以及更多成体系的Android相关原创技术干货。

扫一扫下方二维码或者长按识别二维码，即可关注。

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

上一篇：R语言学习笔记（一）


下一篇：团队项目UML用例图