React Native 之 View使用
前言
学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢
文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢
JSX 和 组件 的概念
React的核心机制之一就是虚拟DOM(可以在内存中创建的虚拟DOM元素)React利用虚拟DOM来减少对实际DOM的操作从而提升性能。传统的创建方式如下:
var newBox = document.createElement('div');
newBox.className = 'box';
$('main').appendChild(newBox);上面的代码在可读性方面比较不好,所以 React 开发了 JSX,利用我们熟悉的 HTML 语法来创建虚拟 DOM,创建方式如下:
<div className="box">
</div>在实际开发中,JSX在产品打包阶段已经编译成纯 JavaScript, JSX的语法不会带来任何性能影响。所以,JSX可以看成是比较高级但依然直观的语法糖
View 组件中常见的属性
React Native 组件 View,其作用等同于iOS中的 UIView,Android中的 android.view 或者网页中的
标签,它是所有组件的父组件,也可以说所有组件继承了它的所有属性这边就将它常见的属性罗列出来:
- Flexbox:弹性布局(Flexbox的介绍可以点我)
- Transforms:动画属性
- backfaceVisibility('visible', 'hidden'):定义界面翻转的时候是否可见
- backgroundColor:背景颜色
// 背景颜色
backgroundColor:'red'效果:
- borderBottomColor:底部边框颜色
// 底部边框宽度
borderBottomWidth:5,
// 底部边框颜色
borderBottomColor:'green'效果:
- borderBottomLeftRadius:底部左边边框圆角
// 底部边框左圆角
borderBottomLeftRadius:5效果:
- borderBottomRightRadius:
// 底部边框右圆角
borderBottomRightRadius:5效果:
- borderBottomWidth:底部边框宽度
// 底部边框宽度
borderBottomWidth:5效果:
- borderColor:边框颜色
// 全体边框宽度
borderWidth:5,
// 全体边框颜色
borderColor:'yellow'效果:
- borderLeftColor:左边框颜色
// 左边边框颜色
borderLeftColor:'black'效果:
- borderLeftWidth:左边边框宽度
// 左边边框宽度
borderLeftWidth:10效果:
- borderRadius:边框圆角
// 全体边框宽度
borderWidth:5,
// 全体边框颜色
borderColor:'black',
// 全体边框圆角
borderRadius:3效果:
- borderRightColor:右边边框颜色
// 右边框颜色
borderRightColor:'yellow'效果:
- borderRightWidth:右边边框宽度
// 右边框宽度
borderRightWidth:10效果:
borderStyle('solid', 'dotted', 'dashed'):边框风格
- solid
// 边框风格
borderStyle:'solid'效果:
- dotted
// 边框风格
borderStyle:'dotted'效果:
- dashed
// 边框风格
borderStyle:'dashed'效果:
borderTopColor:顶部边框颜色(参考上面)
borderTopWidth:顶部边框宽度(参考上面)
borderTopLeftRadius:顶部左边圆角(参考上面)
borderTopRightRadius:顶部右边圆角(参考上面)
borderWidth:边框宽度
// 全体边框宽度
borderWidth:5效果:
- opacity:设置透明度,取值从 0~1
// 透明度
opacity:0.5效果:
overflow('visible', 'hidden'):设置内容超出容器部分是否显示(以后的文章讲解)
elevation:高度,设置Z轴,可产生立体效果(以后文章讲解)
View 组件使用
- 简单使用
render() {
return (
<View style={styles.container}>
<View style={{width:300, height:100, backgroundColor:'red', borderWidth:1, borderColor:'black'}}> </View>
</View>
);
}上面代码是我们熟悉的 CSS 写法
效果:
在 React Native 开发中,推荐我们采用 StyleSheet 来进行组件的布局,这样从代码结构上来看会更加清晰,有利于后期的维护
我们将上面的样式通过 StyleSheet 方式来实现
- 视图部分
var test = React.createClass({
render() {
return (
<View style={styles.container}>
<View style={styles.viewStyle}> </View>
</View>
);
}
});- 样式部分
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}, viewStyle: {
// 尺寸
width:300,
height:100,
// 背景颜色
backgroundColor:'red',
// 边框宽度
borderWidth:1,
// 边框颜色
borderColor:'black'
} });
View 在开发中是经常会接触到的组件,灵活运用它可以帮助我们更好地结构化代码,甚至更方便的布局
最新文章
- 【SAP业务模式】之ICS(七):IDOC配置
- linux下mono的安装与卸载
- NODEJS-fs模块操作文件系统
- Eplan转载
- Xamarin Anroid开发教程之Anroid开发工具及应用介绍
- jQuery学习小结2——动画
- spark 学习
- PyPI镜像网站
- Linux 获取文件时间信息 判断文件是否存在
- 通过ASP禁止指定IP和只允许指定IP访问网站的代码
- 【转】iOS开发者申请发布证书及真机调试图文详解
- C#如何将线程中的代码抛到主线程去执行
- yum puppet
- hdoj 1054 Strategic Game【匈牙利算法+最小顶点覆盖】
- 导出csv文件
- CentOS 6.4 升级python 2.6.6 到 python 2.7.9
- 在Signalr的Hub中写方法实现与安卓的数据交互
- 老李分享:robotium3.6与4.0 later 的区别 2
- 剑指Offer——滴滴笔试题+知识点总结
- ueditorUE 去掉本地保存成功的提示框!
热门文章