【React Native开发】React Native控件之View视图讲解(7)
转载请标明出处: http://www.52php.cn/article/p-ranxxorr-bgy.html 本文出自:【江清清的博客】 (一)前言现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等),今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非常基础的组件View。 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! (二)View组件介绍View作为创建UI时候的最基础,最常用的组件。这边的View组件是支持FlexBox布局(对于FlexBox布局的详细使用讲解,请点击),CSS样式以及相关触摸处理的容器组件。该组件我们可以嵌套在其他视图View里边,并且可以包含很多种类型的子视图。在Web,Android,iOS 三种平台上面该View视图可以对应平台中的三种原生视图,其中iOS对于UIView ,Web端对应<div>标签,Android对于android.view。下面我们来看一个比较简单的实例:
'use strict'; var React = require('react-native'); var { AppRegistry,View,} = React; var TestText = React.createClass({ render: function() { return ( <View style={{flexDirection:'row',padding:20,height:100}}> <View style={{backgroundColor:'red',flex:1}}> </View> </View> ); } }); 上述例子,我们这般首先创建了一个View,该View高度为100 ,但是该View的padding为20,所以整体效果如下: 如果把padding修改成margin:20的话,那么是效果如下: 这个相信做过CSS,原生布局开发的话,大家应该都能看得懂的。 其实React Native开发,View设计的时候,也支持我们采用StyleSheet来进行书写控件的的布局,这样的话,我们的代码会更加的清晰以及便于维护了。其实React Native开发也更加推荐这种方式,下面我们采用StyleSheet来实现一下:
'use strict'; var React = require('react-native'); var { AppRegistry,StyleSheet,} = React; var TestText = React.createClass({ render: function() { return ( <View style={styles.first_view}> <View style={styles.second_view}> </View> </View> ); } }); var styles = StyleSheet.create({ first_view:{ flexDirection:'row',height:100,padding:20 },second_view: { backgroundColor:'red',flex:1 },}); AppRegistry.registerComponent('TestText',() => TestText); 以上的代码我们发现使用StyleSheet,进行创建相关styles,然后赋值给styles对象,在控件中直接styles对象进行使用即可。还是比较OK的。 (三)View属性方法介绍View属性方法介绍如下:
其他的一些方法如下(下面很多是关于事件响应者链的,基本都是比较简单的,就不着重讲解的,有兴趣大家都可以去测试一下): onMoveShouldSetResponder,onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,onResponderReject,onResponderRelease,onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,pointerEvents enum('box-none','none','box-only','auto')(触摸事件是否可以进行穿透控件View); removeClippedSubviews:该控件由于进行优化性能,尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多,已经超过父容器,并且子视图和付容器视图都有overflow:hidden风格样式。 【注】关于上面一些方法的具体使用,后面在讲到事件响应者的时候会进行着重讲解。 (四)View风格Style介绍在React Native中的Style风格布局,其实和CSS样式有很多相似的地方,这边介绍一下:
下面是几个特殊的属性,这边直接介绍所有平台通用以及只在Android平台有效果的属性 ①.testID (全平台) 可以根据该testID在测试的时候定位该View ②:accessibilityComponentType(android平台) 定义是否该UI组件和原生组件一致化处理 ③.accessibilityLiveRegion enum('none','polite','assertive')(android平台) 该当View发生更新时候的,是否需要通过用户,不过该只对Android4.4以及以上的平台设备有效果 ④.collapsable (android平台) 布局合并优化使用 ⑤.importantForAccessibility enum('auto','yes','no','no-hide-descendants') (android平台) 设置视图响应事件等级 ⑥.needsOffscreenAlphaCompositing(android平台) 设置View是否需要渲染和半透明度效果处理的先后次序。 ⑦.renderToHardwareTextureAndroid(android) 设置是否需要GPU进行渲染 最后实例的官方实例为:https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js (五)最后总结今天我们主要介绍了基础控件View的使用方法以及相关属性风格,大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。
尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究! 关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)
关注我的微博,可以获得更多精彩内容
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |