React Native 组件学习 View(ES6)
学完了flex布局，我们发现是在<View></View>下完成的，那我们现在来学习一下View组件，看看他有那些属性，为什么我们会喜欢react-native呢？
React Native 组件 View,其作用等同于iOS中的 UIView,Android中的 android.view 或者网页中的 <div> 标签，它是所有组件的父组件，也可以说所有组件继承了它的所有属性
这边就将它常见的属性罗列出来：
-
Flexbox：弹性布局
-
Transforms：动画属性
-
backfaceVisibility('visible', 'hidden')：定义界面翻转的时候是否可见
1)backgroundColor：背景颜色
（1）backgroundColor ：背景颜色
// 背景颜色
backgroundColor:'red'
效果：
image.png
（2）borderBottomColor：底部边框颜色
// 底部边框宽度
borderBottomWidth:5,
// 底部边框颜色
borderBottomColor:'green'
效果：
image.png
（3）borderBottomLeftRadius：底部左边边框圆角
// 底部边框左圆角
borderBottomLeftRadius:5
效果：
image.png
（4）borderBottomRightRadius：底部边框右圆角
// 底部边框右圆角
borderBottomRightRadius:5
效果：
image.png
borderBottomWidth：底部边框宽度
// 底部边框宽度
borderBottomWidth:5
效果：
image.png
borderColor：边框颜色
// 全体边框宽度
borderWidth:5,
// 全体边框颜色
borderColor:'yellow'
效果：
image.png
borderLeftColor：左边框颜色
// 左边边框颜色
borderLeftColor:'black'
效果：
image.png
borderLeftWidth：左边边框宽度
// 左边边框宽度
borderLeftWidth:10
效果：
image.png
borderRadius：边框圆角
// 全体边框宽度
borderWidth:5,
// 全体边框颜色
borderColor:'black',
// 全体边框圆角
borderRadius:3
效果：
image.png
borderRightColor：右边边框颜色
// 右边框颜色
borderRightColor:'yellow'
效果：
image.png
borderRightWidth：右边边框宽度
// 右边框宽度
borderRightWidth:10
效果：
image.png
borderStyle('solid', 'dotted', 'dashed')：边框风格
solid
// 边框风格
borderStyle:'solid'
效果：
image.png
dotted
// 边框风格
borderStyle:'dotted'
效果：
image.png
dashed
// 边框风格
borderStyle:'dashed'
效果：
image.png
borderTopColor：顶部边框颜色（参考上面）
borderTopWidth：顶部边框宽度（参考上面）
borderTopLeftRadius：顶部左边圆角（参考上面）
borderTopRightRadius：顶部右边圆角（参考上面）
borderWidth：边框宽度
// 全体边框宽度
borderWidth:5
效果：
image.png
opacity：设置透明度，取值从 0~1
// 透明度
opacity:0.5
效果：
image.png
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 写法
效果：
image.png
基本使用
在 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 在开发中是经常会接触到的组件，灵活运用它可以帮助我们更好地结构化代码，甚至更方便的布局，是不是很简单啊？
