React Native 基础之 View 组件
View 其实就是 UI 最基础的组件,跟我们 Android 中的 View 不同,它更像我们 Android 中的 LinearLayout,RN 中的 View 是一个支持 Flexbox 布局、样式、一些触摸处理和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。不论在什么平台上, View 都会直接对应一个平台的原生视图,无论它是 UIView、div 还是 android.view.View。
1. Style
1.1 Flexbox
因为 View 组件提供了 Flexbox 属性,因此,继承了 View 组件的其他组件也都具有 Flexbox 属性。
1.2 shadow相关 (iOS)
View 组件提供了四种阴影属性如下:
样式名 | 取值 | 说明 |
---|---|---|
shadowColor | color | 设置阴影颜色 |
shadowOffset | {width: number, height: number} | 设置阴影位移值 |
shadowOpacity | number | 设置阴影透明度 |
shadowRadius | number | 设置阴影模糊半径 |
1.3 elevation (Android)
elevation 取值为 number。Android 平台没有 shadow 来设置阴影,但是,可以用 elevation 属性来间接的设置阴影。它使用 Android 原生的 elevation API 来设置组件的高度,这样就会在界面上呈现出阴影的效果,此属性仅支持 Android 5.0 及以上版本。
实例代码:
import React, {Component} from 'react';import {
StyleSheet,
Text,
View
} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style = {styles.shadow}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
shadow: {
height: 120,
width: 120,
backgroundColor: 'blue',
elevation: 20,
shadowOffset: {width: 0, height: 0},
shadowColor: 'black',
shadowOpacity: 1,
shadowRadius: 5
}
});
效果图:
很明显,elevation 的阴影效果远远不及 shadow,这时我们可以采用第三方库 react-native-shadow。
1.4 border相关
border 属性的取值为 enum(‘solid’, ‘dotted’, ‘dashed’),用来设置边框的风格,三个值分别对应着实线边框、点状边框和虚线边框,默认值为 solid。
除了可以设置边框的风格,还可以用定义边框的颜色和边框的圆角。边框的颜色设置有 borderColor、borderTopColor 、borderRightColor 、borderBottomColor 、borderLeftColor,取值都为 string ,通常情况下用 borderColor 就足够了。
边框的圆角设置有 borderRadius 、borderTopLeftRadius 、borderTopRightRadius 、borderBottomLeftRadius 、borderBottomRightRadius,取值为 number。
实例代码:
import React, {Component} from 'react';import {
StyleSheet,
Text,
View
} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style = {styles.borderView}>
<Text style = {styles.text}>border</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
borderView: {
height: 50,
width: 80,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 1,
borderStyle: 'dashed',
borderRadius: 10,
borderColor: 'green'
},
text: {
fontSize: 20,
color: 'red'
}
});
效果图:
1.5 transform
transform的取值为:
name | type |
---|---|
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 组件的平移、缩放、旋转和倾斜。
实例代码:
text: { fontSize: 20,
color: 'red',
transform: [{rotate: '40deg'}, {scale: 0.9}, {translateY: 10}]
}
效果图:
1.6 overflow (iOS)
overflow 取值为 enum(‘visible’, ‘hidden’)。它用来定义当 View 组件的子组件的宽高超过 View 组件宽高时的行为,默认值为 hidden,即隐藏超出的部分。overflow 只在 iOS 平台有效,在 Android 平台即使设置 overflow 为 visible,呈现的还会是 hidden 的效果。
1.7 backgroundColor
backgroundColor 取值为 string。它用来设定背景颜色,默认的颜色为非常浅的灰色,只有 Text 和TextInput 组件继承了父组件的背景颜色,其他的组件都要设置自己的背影颜色。
1.8 opacity
opacity 的取值为0到1,当值为0时,表示组件完全透明,而值为1时,则表示组件完全不透明。
2. 属性
2.1 触摸事件回调函数
触摸事件回调函数用来处理用户的触摸屏幕操作,一般情况下,触摸事件都是在其他组件中完成的。关于触摸事件是一个比较大的知识点,这里只介绍这些触摸事件回调函数的作用。
- onStartShouldSetResponder: 触摸事件为 touchDown 时,是否申请成为事件响应者,接收触摸事件。如果返回 true,则表示组件需要成为事件响应者。
- onStartShouldSetResponderCapture:触摸事件为 touchDown 时,是否要拦截此事件,阻止子组件接收该事件,如果返回 true,则表示要进行拦截。
- onMoveShouldSetResponder : 触摸事件为 TouchMove 时,是否申请成为事件响应者,接收触摸事件。如果返回 true,则表示组件需要成为事件响应者。
- onMoveShouldSetResponderCapture :触摸事件为 TouchMove 时,是否要拦截此事件,阻止子组件接收该事件。
- onResponderGrant: 申请成为事件响应者成功,组件开始接收触摸事件 。
- onResponderReject: 申请成为事件响应者失败,其他组件正在进行事件处理 。
- onResponderMove:触摸手指移动的事件(TouchMove)。
- onResponderTerminationRequest:在组件成为事件响应者期间,其他组件申请成为响应者,返回为 true,则表示同意释放响应者角色。
- onResponderTerminate:如果组件释放响应者角色,会回调该函数,通知组件事件响应处理被终止了。这个回调也会发生在系统直接终止组件的事件处理,例如用户在触摸操作过程中,突然来电话的情况。
- onResponderRelease:表示触摸完成(touchUp)的时候的回调,表示用户完成了本次的触摸交互。
2.2 pointerEvents
pointerEvents 的取值为 enum(‘box-none’, ‘none’, ‘box-only’, ‘auto’) 。它用来控制当前视图是否可以作为触控事件的目标。
在开发中,很多组件是被布局到手机界面上的,其中一些组件会遮盖住它的位置下方的组件,有一些场景需要被遮盖住的组件来处理事件。比如一个地图组件上覆盖了一个图像组件用来显示信息,但是我们不想这个图像组件影响用户的手指拖动地图的操作,这时就可以使用图像组件从 View 组件继承得到的 pointerEvents 属性来解决这个问题。
pointerEvents 的取值含义如下所示:
- none:组件自身不能作为触控事件的目标,交由父组件处理。
- box-none:组件自身不能作为触控事件的目标,但其子组件可以。
- box-only:组件自身可以作为触控事件的目标,但其子组件不能。
- auto:组件可以作为触控事件的目标。
2.3 removeClippedSubviews
removeClippedSubviews 的取值为 bool。它的一个特殊的与性能优化相关的属性,通常在 ListView 和 ScrollView 中使用,当组件有很多子组件不在屏幕显示范围时,可以将removeClippedSubviews 设置为 true,允许释放不在显示范围子组件,从而优化了性能。需要注意的是,要想让此属性生效,要确保 overflow 属性为默认的 hidden。
2.4 动画相关
needsOffscreenAlphaCompositing (Android)
needsOffscreenAlphaCompositing 的取值为 bool,是 Android 平台独有的属性。它用来决定视图是否要先离屏渲染再进行半透明度处理,来确保颜色和混合效果正确。为了正确的显示透明表现而进行离屏渲染会带来极大的开销,对于非原生开发者来说很难调试,因此,它的默认值为 false。
renderToHardwareTextureAndroid (Android)
renderToHardwareTextureAndroid 的取值为 bool,同样是 Android 平台独有的属性。它用来决定视图是否要把它本身(以及所有的子视图)渲染到一个 GPU 上的硬件纹理中。
在 Android 平台上,这对于只修改透明度、旋转、位移和缩放的动画和交互是很有用的:视图不必每次都重新绘制,显示列表也不需要重新执行,纹理可以被重用于不同的参数。负面作用是这会大量消耗显存,所以当交互/动画结束后应该把此属性设置回 false。
shouldRasterizeIOS (iOS)
shouldRasterizeIOS 的取值为 bool,是 iOS 平台独有的属性。它决定视图是否需要在被混合之前绘制到一个位图上。
这对于动画和交互来说是有很有用的,它不会修改这个组件的尺寸和它的子组件。举例来说,当我们移动一个静态视图的位置的时候,栅格化允许渲染器重用静态视图的缓存位图,并快速合成。
栅格化会导致离屏的绘图传递,位图会消耗内存。所以使用此属性需要进行充分的测试和评估。
还有一些 View 属性这里没有给出,比如 RN 为了方便失能人士使用手机而提供的相关属性等等,具体的属性请查看官方文档。
以上是 React Native 基础之 View 组件 的全部内容, 来源链接: utcz.com/z/381519.html