React Native组件(二)View组件解析

timg (1)_副本.jpg

相关文章
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平台运行如上代码,效果为:
QQ截图20170624202640_副本.png

在Android平台运行效果则为:
QQ图片20170624204702.jpg

很明显,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的取值会无效,效果如下图所示。

QQ图片20170625164633.jpg

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}]
}

运行效果如下:
QQ图片20170625174225.jpg
对于translate、scale、rotate的效果,Android开发者会非常熟悉,那么rotate和skew有什么区别呢?再来修改textStyle:

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

运行效果如下:
QQ图片20170625174652.jpg

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

QQ图片20170625175751.jpg

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属性

刘望舒 wechat
更多成体系的Android相关原创技术干货,扫一扫上方二维码,即可关注。
0%