React Native组件(二)View组件解析
相关文章 前言了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件。View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件。 1.概述View组件是RN中最基本的组件,绝大部分的组件都继承了View组件的属性,所以学习其他组件前,要首先掌握View组件。 2.style属性style属性作为组件属性中的一种,它包含了多种属性,这里对它们意义进行讲解。 2.1 FlexboxView组件的Flexbox属性这里就不再介绍了,详细请看React Native探索(四)Flexbox布局详解这一篇文章。正是因为View组件提供了Flexbox属性,因此,继承了View组件的其他组件也都具有Flexbox属性。 2.2 shadow相关 (iOS)View组件提供了四种阴影属性如下表:
设置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平台运行如上代码,效果为: 在Android平台运行效果则为: 很明显,elevation的效果远远不及shadow,这时我们可以采用第三方库react-native-shadow。 2.4 border相关borderStyle的取值为 enum(‘solid’,‘dotted’,‘dashed’),用来设置边框的风格,三个值分别对应着实线边框、点状边框和虚线边框,默认值为solid。 import React,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的取值会无效,效果如下图所示。 2.5 transformtransform的取值为: [{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组件的平移、缩放、旋转和倾斜。 textStyle: {
fontSize: 20,transform: [{rotate: '40deg'},{scale: 0.9},{translateY: 10}]
}
运行效果如下: textStyle: { fontSize: 20,transform:[{skewY:'40deg'}]
}
运行效果如下: 从两个图的效果可以看出,rotate和skew的区别就是:rotate在旋转的同时,不会改变Text组件的形态,而skew则随着倾斜角度的改变,Text组件的形态也会发生相应的变化。如果我们加大skew的倾斜角度,比如60deg,Text组件的形态则会变为下图的效果。 2.6 overflow (iOS)overflow取值为enum(‘visible’,‘hidden’)。它用来定义当View组件的子组件的宽高超过View组件宽高时的行为,默认值为hidden,即隐藏超出的部分。overflow只在iOS平台有效,在Android平台即使设置overflow为visible,呈现的还会是hidden的效果。 2.7 backgroundColorbackgroundColor取值为string。它用来设定背景颜色,默认的颜色为非常浅的灰色,只有Text和TextInput组件继承了父组件的背景颜色,其他的组件都要设置自己的背影颜色。 2.8 opacityopacity 的取值为0到1,当值为0时,表示组件完全透明,而值为1时,则表示组件完全不透明。 3.属性3.1 触摸事件回调函数触摸事件回调函数用来处理用户的触摸屏幕操作,一般情况下,触摸事件都是在其他组件中完成的。关于触摸事件是一个比较大的知识点,这里只介绍这些触摸事件回调函数的作用。
3.2 pointerEventspointerEvents的取值为enum(‘box-none’,‘none’,‘box-only’,‘auto’) 。它用来控制当前视图是否可以作为触控事件的目标。
3.3 removeClippedSubviewsremoveClippedSubviews的取值为bool。它的一个特殊的与性能优化相关的属性,通常在ListView和ScrollView中使用,当组件有很多子组件不在屏幕显示范围时,可以将removeClippedSubviews设置为true,允许释放不在显示范围子组件,从而优化了性能。需要注意的是,要想让此属性生效,要确保overflow属性为默认的hidden。 3.4 动画相关needsOffscreenAlphaCompositing (Android) renderToHardwareTextureAndroid (Android) shouldRasterizeIOS (iOS) 还有一些View属性这里没有给出,比如RN为了方便失能人士使用手机而提供的相关属性等等,具体的属性请查看官方文档。 参考资料 欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |