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 在开发中是经常会接触到的组件，灵活运用它可以帮助我们更好地结构化代码，甚至更方便的布局

转载于:https://www.cnblogs.com/miaomiaoshen/p/6144541.html